A "tooltip" is one name given to the small yellow box that appears when you hover over an object on your screen. These simple text tooltips that appear in Internet Explorer 4 (and later), Opera 5 (and later), and Netscape 6 (and later) [unless your visitor has it turned off turned off in Preferences] can be easily created by adding a title= parameter to the object in your page for which you want the tooltip to appear.
So let's start by looking at what a tooltip looks like when created using a title= parameter. Try hovering your mouse over this link.
You are welcome to use this script on any non-commercial web site that you may have. All that I ask is that you don't remove the copyright notice from the top of the script, don't alter the code within the script, and acknowledge where you got the script from by placing a link to this site on the pages where you use it. If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site.
<link rel="stylesheet" href="tooltip.css" type="text/css" />
We do this by coding each tooltip within <div> tags immediately after the <body> tag within the page that will use it. For example the tooltips above are defined using the following code:
So all that we have to do now is to actually attach the tooltips to the links within our page where we want them to be displayed. The code to do this is inserted into the anchor tag that defines the link. We can define these tooltip links in one of two ways, either we attach the tooltip to an existing link which when clicked on will take you to a different page, or we can set up a link that does nothing when clicked on but which will display our tooltip when the mouse moves over it. The following shows you how to code your anchor tag for the second of these options (where you want the link to go somewhere when clicked you should omit the onclick parameter and code your destination in the href parameter):
<a href="#" onmouseout="popUp(event,'t1')"
onmouseover="popUp(event,'t1')" onclick="return false">
As you can see, there are two places in this code where we have referenced the first of the tooltips that we defined before. For each tooltip link that you want to create you use this same code but substitute the id that you defined for the tooltip that you want to attach to the specific link.
Well that's almost all there is too it. With the code that I have given you it will not take you much more effort to create rather fancy tooltips for your pages that greatly extend the user friendliness of your site. You may however want to change the appearance of individual tooltips. With the ones on this page I have changed the individual tooltip widths.
One final note, there is a problem with Stacking Order relating to some form fields so you should try to avoid placing links that use these tooltips near to form fields, particularly drop down selection lists.
This article written by Stephen Chapman, Felgall Pty Ltd.