A Roundup of Quality jQuery Tooltip Plugins

By   |  Stashed in Tools & Resources

I recently attempted to add a jQuery tooltip to my website, but I had some trouble putting together a decent solution. Through that experience, I’ve assembled this round up of some of the best and most popular plugins I’ve found.

jQuery Tooltip


Developed by Jorn Zaefferer, this plugin “displays a customized tooltip instead of the default one for every selected element. The tooltip behaviour mimics the default one, but lets you style the tooltip and specify the delay before displaying it. More customizations are available via plugin options.”

It’s very clean and works smoothly, plus it requires little effort to set up and get running. The official demo page is stuffed with examples that will surely help you get started.

To install this plugin, download the package from the project home page. Once you have the files unzipped into your directory of choice, you can start having a look at the examples included or just head on to including the script into your HTML document.

A common problem that arises when dealing with tooltips is the different styling of balloons in the same page. Tooltip provides an easy way to overcome this issue by means of the extraClass option.

$(function () {
	// All elements with class "pretty" will have the same style
	$(’.pretty’).Tooltip ({
		track: true,
		delay: 0

// We can use this instead to have tooltips with different appearence on the same page
$(function () {
	$(’.pretty1’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: "fancy1"
	$(’.pretty2’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: "fancy2"

The CSS would be

.fancy1 {
	background-color: blue;

.fancy2 {
	background-color: yellow;

There is also a very useful option that lets you fix PNG transparent backgrounds in IE: just add fixPNG: true to make IE aware there’s some sort of transparent background!

$(function () {
	$(’#pretty’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: “pretty1	”,
		fixPNG: true,
		opacity: 0.66



Beautytips is a simple to use balloon style tooltip plugin brought to the world by Jeff Robbins. Balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

The demo page is a huge help for beginners because it shows many ways to accomplish some of the most common tasks a ballooner may want to see realized.

Installation is no big deal. As usual, just download the package and have fun. A special note, though, goes to the other plugins included; since BeautyTips can work with bgiframe (to fix z-index problems) and (for a better control of hover events), they both come along with BeautyTips files. If you plan to make this work in IE, don’t forget to have a look at Google’s ExplorerCanvas, to support Canvas in IE, also included.

Basic usage is somewhat simple and is no longer than

// or, if you want to add some text
$(selector).bt('Content text');

More advanced solutions are to change the trigger event and position, style and appearence of the balloon for a better visual experience.

$(selector).bt ({
	cssStyles: {color: , fontWeight: , width: },
	padding: ,
	cornerRadius: ,



qTip “is an advanced tooltip plugin for the ever popular jQuery JavaScript framework” written by Craig Thompson. “Built from the ground up to be user-friendly, yet incredibly powerful, qTip provides you with tons of features like rounded corners and tips, and best of all… it’s completely free!”

Installation is a no-brainer, just unzip and include:

Documentation and demos are pretty extensive and cover a lot of common problems and useful information. There’s also a very well-made tutorial describing in detail how it works and what are the options you have to tweak in order to change style dimensions and everything else.

Amongst the three plugins I’ve covered, this is my favorite because of its many options and straight-forward approach. Also, if you ever wanted to give tooltips a tooltip (and who hasn’t?), now you can!


These are only three of the many plugins available out there, some a little better, some with more features and cool effects. Just for completeness and respect towards other plugin developers, here is a list of other solutions I’ve found on the web. Please feel free to leave your opinion and add to the list of all the tooltip plugins I may have forgotten.

Obviously, the key to get nice stuff done is… try, read, understand and try again – so experiment with these plugins and find the one that best suits your needs. Or write your own!

About the Author

Keen on geeky stuff, I tried everything from rocketry to weird game development adventures more than once. I love orange-colored things. I'd be a web developer with a passion for design but I find myself writing for some websites every now and then.

More posts by


  • http://alifity.com/ Alif Rachmawadi

    All you mentions above are great tooltip plugins especially for qtip.
    Nice roundups Giulio!
    .-= Alif Rachmawadi´s last blog ..Web Scraping.. Learn the Basic =-.

  • http://www.blog.exxcorpio.com Luis Lopez

    Excellent article, I need some of this cause I am learning some jquery since some weeks, even if I can not dedicate all the time I want.
    .-= Luis Lopez´s last blog ..What is RSS and The Subscribe to My RSS Experiment =-.

  • http://robinferianto.com robb

    i’ve used jtip before and it’s very easy to use and practical.
    recommended !!

  • http://craigsworks.com/projects/qtip Craig Thompson

    Great article Guilio. Glad to hear qTip was your favourite plugin and you found the documentation helpful. Feel free to pop by the forums if you ever have any problems setting it up!
    .-= Craig Thompson´s last blog ..New corner engine =-.

  • http://choosedaily.com Vernon

    Great post, it’s nice how you went through to show all the code like you did. We recently put up a list of the 8 best jQuery tooltip plugins if anyone’s interested: http://choosedaily.com/862/8-best-jquery-tooltip-plugins/
    .-= Vernon´s last blog ..Top 10 Typography Rules All in One Place =-.

  • http://www.crearedesign.co.uk Michael Angrave

    I’ve used Qtip before, and found it very easy to implement. Good reference post, would certainly like to see more of your JQuery recommendations.
    .-= Michael Angrave´s last blog ..Web Design Techniques: Creating a Date Box for WordPress =-.

  • http://www.sjlwebdesign.co.uk Sam Logan

    Great article, I have used jquery tooltip and qtip before and they were both very straight forward and easy to integrate.

  • http://www.erkasoft.com erkasoft

    nice article, thank you for sharing.

  • http://www.clippingimages.com Mahmudur Rahman

    jQuery Tooltip Plugins seems very effective plugin, thanks for shearing this nice post….

  • http://www.webcatch.co.uk Brian Williamson

    Many thanks for taking the time to share this, a great help!

  • http://essay-writer.org/ Annanicloe

    I don’t usually reply on articles I read but I have to say this was just great. Keep up the good work.

  • Barbara Borowitz

    An additional tool for creating jQuery Tooltips that you might want to check out is Likno Web Tooltips Builder:

  • http://www.fKiAMA43.com Terrell

    That’s a good article about A Roundup of Quality jQuery Tooltip Plugins | MyInkBlog. Thanks for the info.

  • http://www.webcreationuk.com/ Web Design

    Great article! I find Qtip so great, I shall also check Barbara’s Likno tool to see what’s with it. :)