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

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

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.