Extended Tooltips

This is a Javascript Tooltip

What is a Tooltip

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.

This is all very well when you just want to display some simple text to describe the object being pointed at but using Javascript we can expand the capabilities of the tooltip to include just about anything that we can describe using HTML.

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.


The Javascript Tooltip

We can also create tooltips with a similar appearance using Javascript. Try hovering your mouse over this link. This tooltip works in Internet Explorer 5+, Netscape 6+, and Opera 7+ just the same as the earlier one, it doesn't work in Opera 5 but it does work in Opera 6 except for displaying the tooltip in a fixed position instead of near the link. This tooltip would also work in IE4 and in Netscape 4 (which the earlier one didn't) provided that you use the old version of the script. Finally, this tooltip won't work if your visitor has Javascript turned off. One difference that you will notice between this tooltip and the earlier one is that this tip displays immediately you move the mouse over the link whereas the earlier example had a delay before the tooltip appeared. The only problem with those browsers that display the tooltip in a fixed position rather than relative to the link is that if the link is so far down the page that the fixed position at the top of the page where the tip is displayed has scrolled off of the screen then your visitor wont see the tooltip.

So why would we want to bother with a Javascript tooltip rather than just using the title= parameter? Apart from the fact that the Javascript tooltip works in Netscape 4 there doesn't appear to be much advantage to using it so far does there? Well try hovering your mouse over this link. You should see a copy of the title graphic from the top of this page along with the Javascript generated message that displays under it. If you have images turned off then you should see the same text as you saw at the top of the page.

With Javascript generated tooltips we can include anything that we can code using HTML including graphics and even code generated from other Javascripts. This will make our tooltips much more flexible in what they can display and hopefully much more useful to your visitors. The only thing that you do need to keep in mind is that your visitor will be unable to interact with the tooltip content using their mouse since as soon as they move their mouse from over the link to which the tooltip is attached, the tooltip will disappear.


The Script

So now that I've shown you the Javascript tooltip and given you reasons why you might want to use it, let's move on to how to use Javascript tooltips on your site. The first step is to create the script and link it into your page. I now have two versions of the script for you to choose from as the one that supports modern browsers but not IE4 or Netscape 4 is only half the size of the old version that also supports those two browsers.

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.

You can download the tooltip script here. I have also included the cascading stylesheet that I used to define the appearance of the tooltip box and its default position for Opera 6. You can change the content of the stylesheet entry if you want to change the appearance of all of your Javascript tooltips but don't touch the position or visibility parameters.

To incorporate the Javascript tooltips into your page you first need to attach the script and stylesheet into your page. You can do this by inserting the following code at the end of the <head> section of your page source:

 <script type="text/javascript" src="tooltip.js"></script>
<link rel="stylesheet" href="tooltip.css" type="text/css" />


Defining Tooltips

By incorporating the above code, we have made the Javascript tooltip facility available to use on our page. To actually use Javascript tooltips we next need to define the content of each tooltip that we want to use with our page.

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:

 <div id="t1" class="tip">This is a Javascript Tooltip</div>
<div id="t2" class="tip"><table class="centre" width="100%" border="0" cellspacing="0" cellpadding="5"><tr><td valign="bottom" class="centre"><img src="img/head.gif" width="250" height="55" border="0" alt="Ask Felgall - Computer Help from Felgall Pty Ltd" /></td></tr><tr<>td valign="bottom" class="centre"> <script type="text/javascript" src="message.js"></script> </td></tr></table></div>

Using class="tip" with each entry defines the content of the <div> tag as being a tooltip because it associates it with the tip class that we defined in the cascading stylesheet. The stylesheet defines the tip as using absolute positioning so that its location on the page will not be affected by its location within the code and the visibility is set to hidden so that it will not be displayed on the page until something happens to alter that visibility. We define an unique id for each tooltip so that we can reference which tip we want to display in the code that we add to the links. You can use whatever names that you want for your tooltip ids as long as they are unique. As you can see from the second example we can easily include tables, images, javascripts, etc. into the tooltips that we intend to display.


Linking to Tooltips

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')" 
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.

go to top

FaceBook Follow
Twitter Follow