How to customize buttons using qtip2

Question

On qtip2 demos page http://qtip2.com/demos: there are buttons under styles and customization section. how to achieve that.

Answer 1

Each style is a different CSS class from the jquery.qtip.css file.

• .qtip-shadow adds the shadow
• .qtip-rounded adds the rounded edges
• .qtip-yellow adds the yellow color (etc.. etc..)

When you view the uncompressed CSS file. All the class names after .qtip-default that are in the first column are style modifiers.

To create a yellow qtip

$(".tooltip").qtip({style:{classes: "qtip-yellow"});

To apply styles from qtip element

<div class="tooltip" data-style="qtip-yellow"/>

$(".tooltip").each(function(){
    $(this).qtip({style:{classes: $(this).data("style")});
});