Search code examples
jqueryjquery-pluginsqtip

qtip bubble styling


I just picked up qtip2 plugin for JQuery and can't seem to get the style to work according to their examples. Perhaps I am not understanding something?

This is their example for loading the 6 default available themes, but it does not change anything whether I use cream, red, dark, light, blue or green. I just keep getting the default cream theme. These should have also already been available and usable since qtip 1x?

$("jqueryselector").qtip({
   content: 'Dark themes are all the rage!',
   style: { 
      name: 'dark' // Inherit from preset style
   }
});

My code is as follows in the JQuery:

$(function(){
    $('a['title']).qtip({style:{name:'red',tip:true}}); // picked up from the getting started page
});

Solution

  • That way of styling the tooltip applies to the original version of qtip which is now superseded by a newer version. qtip2 uses a better class based styling method.

    $('.selector').qtip({
       content: {
          text: 'I\'m blue... deal with it!'
       },
       style: {
          classes: 'ui-tooltip-blue ui-tooltip-shadow'
       }
    });
    

    You definitely want to use qtip2. It is much improved over qtip1.