Search code examples
javascriptjqueryqtip2themeroller

Using Themroller with qTip 2.0


I am using qTip 2.0 on my site and it says I can use themeroller to style my tool tips. Yet I am a bit confused as how I use the themeroller with qTip? It has tutorials on its page but the section for Themeroller is blank.

Can anyone help me with this as I am stuck.

Here is my qTip Code:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j('.tool').qtip({
   content: 'Tool Tip Text',
position: {
  my: 'bottom left', 
  at: 'top left', 
  target: $j('.tool') 
  },
  style: {
  classes: 
  'ui-tooltip-tipsy' /*This is a style that comes with qTip 2.0 - I want to     
                       replace with a themeroller style.*/
}
});
</script>

Solution

  •     style: {
            classes: 'ui-tooltip-shadow', // Optional shadow...
            tip: 'top center', // Tips work nicely with the styles too!
    
            /*
             * The important part: style.widget property
    
             * This tells qTip to apply the ui-widget classes to
             * the main, titlebar and content elements of the qTip.
             * Otherwise they won't be applied and ThemeRoller styles
             * won't effect this particular tooltip.
             */
            widget: true
        }
    

    Needs to be added :)