One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.

View Live Demo

Download Source Code

Here's a rundown of what each file/folder is:

• Images folder contains the following images:
• - - tipTip.png - created in Step 2
• - - tipMid.png - created in Step 2
• - - tipBtm.png - created in Step 2
• index.html - - created in Step 3
• style.css - created in Step 3
• jquery-1.3.1.min.js - download this here
• jquery.betterTooltip.js - - created in Step 5 

Once you are done and happy with your results, you can move your plugin from the basic HTML page full of filler text to the real world and put it to use.

This is a very basic example of what a tooltip plugin can do. The fun part now will be to make it more robust. There are all sorts of ways to expand this plugin. A needed enhancement would be detecting the location of the tooltip in relation to the boundaries of the browser window and displaying the tooltip accordingly so it doesn't get cut off.

Leave your comments