The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small “hover box” appears with supplementary information regarding the item being hovered over.

Source: Wikipedia (http://en.wikipedia.org/wiki/Tooltip)

Tooltips are nice way to show small bits of information to the user. The main advantage is it doesn’t drive the traffic away and at the same time we can show necessary information to the user.

I have listed 3 plugins for jQuery and 2 for mootools.

For jQuery,

Tooltip plugin by bassistance

It is one of the first and best tool tip plugin for jQuery and now it is in version 1.3. It is highly customizable and recommended. The positioning of tool tip is adjusted automatically.

Don’t forget to checkout all the demos. It includes many examples

jTip

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

It is from Cody Lindley who is also the author of the famous thickbox. Unlike many other tooltip plugins, the cotent is fetched from the url not from the title attribute. This is useful when you want to show more information.

Please check the HTML source code to get a good idea about jTip

BeautyTips

Beauty Tips was written to be simple to use and pretty. All of its options are documented at the bottom of the jquery.bt.js file and defaults can be overwritten globally for the entire page, or individually on each call.

By default each tooltip will be positioned on the side of the target element which has the most free space. This is affected by the scroll position and size of the current window, so each Beauty Tip is redrawn each time it is displayed. It may appear above an element at the bottom of the page, but when the page is scrolled down (and the element is at the top of the page) it will then appear below it. Additionally, positions can be forced or a preferred order can be defined.

For Mootools,

The default Mootools Tooltip

In most cases, you doesn’t need another tooltip. The one included in mootools library is enough most of the time.

It will also work with Mootools 1.2. Please check the Mootools forum for more info

Customizing the Tooltip plugin

David Walsh has an interesting post which describes how to style the tool tip to your own brand style.

Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website?

Open demo | Demo in new window
More Details

Tooltip by HotAjax

It is an advanced tooltip plugin with nice animation. It also supports sticky behavior.

Related posts:

1. 3 jQuery plugins to show context menu A context menu (also contextual menu, shortcut menu and, popup...
2. jQuery plugins to show data in table format or chart format Need to show data in a tabular format or...
3. jGrowl – To show unobtrusive messages jGrowl is a nice way to show unobtrusive messages...

Related posts brought to you by Yet Another Related Posts Plugin.