9 Excellent ToolTip Plugins with jQuery

Posted on March 22, 2010 greenhawk

1 Comment BOOKMARK

1) clueTip

clueTip goes one step further than (mb)tooltip, it has many advanced options that you can utilize such as having the tooltip move with the mouse cursor, forcing the tooltip to stay on the page until a user action closes it, a really nice “loader” graphic which appears between the point that the event is fired and the tooltip is loaded, and much more.

The loader is actually very useful, especially when you are loading dynamic content into your tooltip via ajax for example. This effect basically stops the tooltip from appearing empty whilst the content loads.

Basic implementation is like many plugins, with the plugin displaying the HTML title attribute contents within the tooltip:

$('a.tips').cluetip();

2) Simple tooltip

Simple tooltip is what it is, a very simple tooltip implementation. It’ll simply display a nice animated (fade in/out) tooltip with about as much effort as writing this sentence…

I have implemented Simple tooltip in my social buttons at the top and bottom of each article, so check it out.

$("#some-element").simpletooltip("Tooltip text here!")

3) Thumbnail Hover Popup

This is a little bit off piste, however it does have similar functionality to a tooltip plugin. Thumbnail Hover Popup dynamically loads an image in full size when you hover over it’s thumbnail counterpart. It’s okay, but doesn’t really do a lot for me. I think if you’re going to use it you really need to restrict the size of the “larger” image, as a better alternative is to show a modal window like Thickbox.

4) GoodTip

I’m actually gong to let the developer speak for this plugin as to why it’s any better than the rest: “Why is it better? Because you can put it on anything! Because you can hook it! Because you can style it! Because you can get inline or title content! Because is SEXY! because it works (so far)! Because you can nudge it! Because I put alot of time into it and you love me. Because it TACKS!”

They have a point, it is very flexible and easy to use. Check out the demos here.

5) SimpleTip

I really like SimpleTip. The flexibility built in is great, the documentation is great, and the demos on how to use it are also great! You’ve got positioning, effects, and dynamic content via load() options. Definitely one of the better implementations of a tooltip plugin.

6) Light-Tooltip

Light-Tooltip is pimped as the “Easiest tooltip and image preview” plugin using jQuery. It’s kind of a mixture between the other simply tooltip plugin implementations as well as the Thumbnail Hover Popup plugin we looked at in item (7). It is true however, that it is pretty darn easy to get tooltips to work using this plugin. It will take the title attribute (as others do) of an anchor tag for example and load that as the tooltip just by adding “class=”tooltip”” to your anchor. Nicely.

7) Inline Tooltip

Inline Tooltip allows you to create rich HTML tooltips very simply. The plugin replaces the default browser tooltip functionality by placing the tooltip directly under the link anchor. It also has the added benefit of dynamically moving the tooltip if it was likely to appear outside of the window view, which is a nice add-on.

<div class="htmltooltip">RSS stands for Really Simple Syndication, and is a type of XML file format.</div>

8) Likno Web Tooltips

Likno Web Tooltips Builder is a user-friendly interface (GUI) to the popular jQuery open source library, that allows you to create stylish, feature-rich html tooltips for your web pages, with minimal effort and coding.