1) (mb)ToolTip

(mb)ToolTip is a nice a very good looking alternative to the native browser tooltip implementation. The plugin has two extra features whereby you can control the time that the tooltip appears, as well as including a nice drop shadow to the tooltip itself to make it really standout. Testing here on Safari 3/4 and FF3 proved very good.

Implementation can be as simple as:

<h2 tooltip="here it is my tooltip!">

2) 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();

3) 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!")

4) Orbital

The Orbital Tooltip plugin is slightly different in its implementation whereby it gives you, the developer, a lot more flexibility with the placement of the tooltip. As you can see in the screenshot above, you can be quite specific as to where in relation to the event call you can place the tooltip.

$('#square4').orbitaltooltip({
orbitalPosition: 	320,
spacing: 		10,
tooltipClass: 		'orbitaltooltip-simplebox',
html:			'<p>at 320</p>'
});

5) jQToolTip

jQToolTip doesn’t really go anywhere previous examples have, but it’s another easy to use implementation of basic tooltips. You can set a delay time, as well as offset and opacity on your tooltip, so can be quite flexible.

6) 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>

7) 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.

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.

9) 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.

$("#mydiv").simpleTip();

10) 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.

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

This entry was posted on Thursday, March 5th, 2009 and is filed under Development, Technology, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.