A tooltip is a short and informative text that appears in a box that pops out when you hover the mouse cursor over an element (link, button, div etc.).

1. DHTML JavaScript Tool Tips is a JavaScript Cross Browser library to create tool tips (information pop-up boxes). This script can be customized in multiple ways and may contain plain-text as well as HTML (images, line breaks).

* Implementation
1. Download the JS File: wz_tooltip.js.
2. Include the library in your HTML page by inserting the following line in the BODY section of your page (it can be added after the last tag containing a tool tip):

<script language="JavaScript" type="text/javascript" src="http://www.your-domain-name.com/path/to/wz_tooltip.js"></script>

3. Each of the tags requires only the onMouseOver attribute (onMouseOut is not required):

<a href="photos.htm" onmouseover="return escape('Your text here')">Photos</a>

* Browsers Compatibility: Netscape 4 and 6+, Mozilla, Galeon, Opera 5, 6 and 7+, MSIE 4, 5+, Konqueror 3

2. Fading JavaScript Tooltips 2kb is an animated JS tool tip script that is very easy to use and lightweight. To see how the script is implemented check the index.html file from the ZIP archive.

Tested in: IE6+, FireFox, Opera, Safari

To see a walk-through of the code and the logic check this post.

3. Vertigo Project: vTip – A script designed to quickly provide very lightweight tooltips to users of JQuery.

* Implementation

<a href="http://www.vertigo-project.com" title="This is tooltip." class="vtip">Link Tooltip</a>
<img src="http://www.website.com/image.png" title="ToolTip on an image!" class="vtip" />
<div class="vtip" title="A tooltip that shows for the whole div!">
This div has a ToolTip.
</div>

Read more…

4. jTip – A jQuery Tool Tip – Pulls data from the server using a hidden HTTP Request (HttpXMLRequest object). It’s customizable 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.

Read more…

5. Simpletip – A simple jQuery tooltip plugin that allows you to easily create tooltips on any element on the page using the jQuery’s selectors and event management. The tooltip can be: static, dynamic & loaded through AJAX with a variety of different visual effects: fade, slide.

Read more…

6. BeautyTips is a jQuery ToolTip Plugin that creates rollover balloon-help style tooltips for any element on the page. The script calculates the best position for each tooltip bubble and then draws it. Bubbles can have rounded corners with a variable corner radius, “spike” length, color, opacity, and much more.

Read more…

7. Cross-browser JavaScript tooltip – Displays ToolTips containing HTML markup. It works in all major browsers.

Read more…

8. SkinnyTip is a free JavaScript Popup Tooltip Library that is easy to install and configure. It’s very small, having under 10kb in size. It supports the latest versions of IE, Firefox, and Netscape.

Read more…

9. Dyn-web’s 2008 ToolTip is an unobtrusive and easy to setup script. The code offers a variety of options for source and tooltip content and flexible control of positioning, formatting and display. The tooltip content can be held in a variable, obtained via AJAX, or it can come from HTML elements in the page.

Read more…

10. OverLIB is a JavaScript library that can be used on websites to provide the user with information about what will happen when they click on a link as well as navigational help.

Quick feature list:

• Background picture with transparency
• Making the popup go above the cursor to the left with snap!
• Taking full control over the html
• Different fonts and colors
• Html in the popup

Read more…

11. CSS Bubble Tooltips is a nice and easy customizable non-javascript ToolTip.

Read more…

12. Easy CSS ToolTip is a very simple cross-browser tooltip that has less then 1KB (a few lines of code), being easy to integrate on your website.

Read more…

13. Pure CSS Tooltips

Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.

Read more…

14. Easiest Tooltip and Image Preview Using jQuery from CSS Globe

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Read more…