jQuery and Mootools plugin to show tooltips

December 28, 2008 by admin · Leave a Comment
Filed under: jQuery, MooTools 

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.

Dependencies jQuery 1.2, bgiframe plugin optional
Size Less than 4KB
Restrictions None (Free to use on any site – GPL/MIT License)
Demo Open | Open in new window
Info & Download Open

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


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.

Dependencies jQuery
Size 4KB
Restrictions None (Free to use on any sit)
Demo jTip Demo | jTip Demo in new window
Info & Download Open

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


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.

Dependencies jQuery
Size 34 KB (Uncompressed)
Restrictions None
Demo BeautyTips demo | BeautyTips demo in new window
Info & Download Open

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.

Dependencies Mootools
Size Included in Mootools
Restrictions None
Demo Open demo | Demo in new window
Info & Download Open

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.

Dependencies Mootools
Size 3 KB
Restrictions None
Demo Open demo | Demo in new window
Info & Download Open

Related posts:

  1. 3 jQuery plugins to show context menu
  2. jGrowl – To show unobtrusive messages
  3. jQuery plugins to show data in table format or chart format
  4. 10 Mootools plugin for showing image gallery
  5. Improved lava lamp effect for jQuery and Mootools

If you like this post, please share it so that others can also find this

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!