qTip Tooltip with jQuery UI ThemeRoller Support

Recently as I develop with jQuery, I’ve been trying to either use jQuery UI ThemeRoller supported plugins or somehow tweak existing jQuery plugins to support the ThemeRoller classes.

Note: There are many plugins out there that already support ThemeRoller (and you can find a list I’ve compiled in my previous Quickly Testing Various jQuery UI Themes on Your Website post).

Out of all the jQuery tooltip plugins I’ve seen, I prefer the qTip implementation. The tooltips look good and it is easy to use. There are several themes that are supported out of the box and you can also tweak the styles if you don’t like the baked in ones.

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      name: 'cream', 
      tip: true 
   } 
});

That is all well and good, but what I really wanted was to control the theme a little more. The documentation on the website got me a little further. You can tweak out the style settings and instead of using one of the default themes you can specify the border and color values manually.

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      border: { 
         width: 5, 
         radius: 10, 
         color: '#017DC3' 
      }, 
      background: '#ffffff', 
      color: '#000000', 
      padding: 10, 
      textAlign: 'left', 
      tip: true 
   } 
});

Well, that almost gets me to where I wanted to be. Instead of defining the styles, I wanted qTip to use the ThemeRoller classes so when/if I changed my jQuery UI theme all the styles would be applied auto-magically.

So, I thought about submitting a new feature request, but before I did I noticed there was already a feature request listed for for ThemeRoller Support. That is exactly what I was looking for! Then I noticed that it was already developed. It was then that I ran across a forum entry authored by David (dfeeney) showing how to use the ThemeRoller classes with qTip.

$.fn.qtip.styles.themeroller = { 
   background: null, 
   color: null, 
   tip: { 
      corner: true, 
      background: null 
   }, 
   border: { 
      width: 5, 
      radius: 3 
   }, 
   title: { 
      'background': null, 
      'fontWeight': null 
   }, 
   classes: { 
      tooltip: 'ui-widget', 
      tip: 'ui-widget', 
      title: 'ui-widget-header', 
      content: 'ui-widget-content' 
   } 
}; 

$('a[title]').qtip({ 
   position: { 
      corner: { 
         target: 'rightTop', 
         tooltip: 'leftBottom' 
      } 
   }, 
   style: { 
      name: 'themeroller', 
      tip: true 
   } 
});

There is a concept of creating your own theme (or in qTip’s nomenclature that is ‘style’) and this is documented well in their online help. The above code create a new theme and uses the ThemeRoller classes to define the tooltip, tip, title, and content section of the qTip tooltip!

I imagine at some point the classes attribute will be highlighted on the online help, but as for now the only place I saw it used on in the forums or if you dig through the source code. Anyway, that is how you get the qTip to use the ThemeRoller.

Download Example Code

Demonstrate Example Code