1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bltip1.htm

was emailed to:

Thanks for sharing About.com with others!

This is a Javascript Tooltip
Please visit my site

Extended Tooltip

1. Introduction and Sample

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) and [unless your visitor has it turned off turned off in Preferences] can be easily created by adding a title attribute to the object in your page for which you want the tooltip to appear. Tooltips will also appear in Internet Explorer and Netscape 4 when the alt attribute is used with an image (but this is not supposed to happen according to the standards and you can correct this error in IE by always including a title attribute as well as the alt atribute).

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 attribute. Try hovering your mouse over this link.

We can create tooltips with a similar appearance to this by 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 attribute? 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 www.felgall.com along with a message suggesting that you visit the site. You can't get a tooltip like that to display by using the title attribute.

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 next step is to get this script to use on your own pages.

1 | 2 | 3 | 4 | 5

Note that this script and the associated description of how to use it are copied from the "Ask Felgall" website with the permission of the copyright owner.

©2014 About.com. All rights reserved.