How do I set styles in qTip2 jquery plugin?

Question

I have the following code:

$('a.phonetooltip').qtip({ // Grab some elements to apply the tooltip to
content: {
    text: 'Clicking this link will only work on mobile devices',
    style: { classes: 'qtip-dark' }

}
})

I have been trying for ages to change the default styling to the dark style, but I can't get it to work. It always shows up with the default style.

On the qTip2 guides it says:

/* Basic styles */
.qtip-light{} /* Light coloured style */
.qtip-dark{} /* Alternative dark style */
.qtip-cream{} /* Cream-esque style, similar to the default */
.qtip-red{} /* Alert-ful red style */
.qtip-green{} /* Positive green style */
.qtip-blue{} /* Informative blue style */

/* CSS3 styles */
.qtip-rounded{} /* CSS3 border-radius class for applying rounded corners to your tooltips */
.qtip-shadow{} /* CSS3 box-shadow class for applying shadows to your tooltips */
.qtip-bootstrap{} /* Twitter Bootstrap style */
.qtip-youtube{} /* Google's new YouTube style  */
.qtip-tipsy{} /* Minimalist Tipsy style */
.qtip-tipped{} /* Tipped libraries "Blue" style */
.qtip-jtools{} /* jTools tooltip style */
.qtip-cluetip{} /* Good ole' ClueTip style */

But it doesn't give example code of how to implement them. Help!

Tammeratammi

Answer 1

Might be because style is a separate property from content.

Try this:

$('a.phonetooltip').qtip({

   content: {
       text: 'Clicking this link will only work on mobile devices'
   },    
   style: { 
       classes: 'qtip-dark' 
   }

})

Trahurn

Brilliant! Works perfectly. Thank you! – Tammeratammi