Knowledge Base Articles » KB100216: Adding ToolTips to Your HTML Pages.
If you place and hold your mouse pointer
over the title of this article you will see a small window appear next to
the mouse containing an explanation of the fact that the text your mouse
is over is the title of the article. This feature is known as a ToolTip
and is commonly used to display advisory information as in the above example.
This article demonstrates a cross-browser implementation of ToolTips.
Internet Explorer has natively supported ToolTips since version 4 via the
attribute which applies to almost all tags, this is also supported in Netscape 7.
part of the W3C Document Object Model (HTML) Level 1 Recommendation. However,
older versions of Netscape Navigator do not support the title tag and must use the
To simulate the same behavior in Netscape Navigator, a hidden layer is utilized.
This layer is dynamically moved to the location of the mouse and then made
visible whenever an appropriate mouseover event occurs. When the corresponding
mouseout event occurs, the layer is once again hidden. As of version 4.7,
Netscape Navigator only supports the onmouseover
the a, area,
tags. Therefore, this cross-browser implementation
of ToolTips can only be applied to the a
tags (since Internet Explorer
does not support layers).
and hidetip(), which show and hide the ToolTip respectively. These functions
are triggered by the onmouseover
events of the tag to which
the ToolTip is being added. A single hidden div
element is also utilized.
can be declared anywhere in the body of your HTML document, and
is used in the Netscape browser to display the ToolTip. The two required
if (thetitle.length > 1)
thetitles += thetitle[i] + "\r\n"
current.title = thetitles
else current.title = text
else if (document.layers)
'<layer bgColor="#FFFFE7" style="border:1px ' +
'solid black; font-size:12px;color:#000000;">' + text + '</layer>')
<div id=tooltip style="position:absolute;visibility:hidden"></div>
In the above script, the "if (document.all)" and "if (document.layers)"
tests are used to perform browser detection - only Internet Explorer implements
the document.all collection, whereas only Netscape implements the document.layers
collection. Having added the div
and hidetip() to your page, you are now ready to begin adding ToolTips.
To add a ToolTip to an a
tag, you simply need to add onmouseover
event-handlers to the tag to call the showtip() and hidetip()
functions respectively. When you call showtip() you must pass it three arguments
- a reference to the object for which the ToolTip is being displayed, the
event object representing the mouseover operation, and the text to be displayed
in the ToolTip. To display a multi-line ToolTip, separate the lines of text
with "<br>" tags. The syntax for setting up a multi-line ToolTip on
an A tag is illustrated below:
<A href="#" onmouseover="showtip(this,event,'This
is the title<br>of the article.')" onmouseout="hidetip()">A100216: Adding
ToolTips to your HTML pages.</a>
When adding your own ToolTips, set the href and ToolTip text appropriately,
but the remainder of the syntax above should not be altered.