Ben's Sandbox

A Comparison of Different jQuery Tooltip Plugin Libraries

View Blog   View Source  
There are a lot of tooltip plugin libraries out there. Find one that does what you need can be a challenge. I evaluated four libraries: jQuery UI, Twitter Bootstrap, qTip, and Powertip based on several different features. Below are some of the experiements I did to try out the capabilities of each library. Check out my related blog post for a more in depth discussion. I copied all the examples from the post to here so it was easier to view the source if you're interested.


Basic Title Attribute
Start with the basic - initialize the tooltip to use content defined on the title attribute.

Programmatic Content
Statically setting content in the elements attribute is nice but what if you want to set it from code?

Code qTip2 Code jQueryUI Code PowerTip Code Twitter Bootstrap
Dynamic Content
Which brings us to dynamically changing the content based on loading it from an AJAX call. The biggest challenge is showing the tooltip with some kind of loading indicator and then properly repositioning it after the content loads.

AJAX qTip2 AJAX jQueryUI AJAX PowerTip AJAX Twitter Bootstrap
Custom Styling
All of these libraries can have their CSS hacked. Here's how to make jQuery UI's look more like Twitter Bootstrap.

Trigger Controls
How easily can you take control of the show/hide timing and triggering. Some libraries can do it better than others. jQuery UI required the most hacking.