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 title attribute which applies to almost all tags, this is also supported in Netscape 7. The title attribute is 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 code below.
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 and onmouseout events with the a, area, and layer tags. Therefore, this cross-browser implementation of ToolTips can only be applied to the a and area tags (since Internet Explorer does not support layers).
The ToolTip is implemented using two main JavaScript functions, showtip() and hidetip(), which show and hide the ToolTip respectively. These functions are triggered by the onmouseover and onmouseout events of the tag to which the ToolTip is being added. A single hidden div element is also utilized. The div 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 JavaScript functions and the code for declaring the hidden div element are shown below:
<head>
<script>
function showtip(current,e,text)
{
if (document.all)
{
thetitle=text.split('<br>')
if (thetitle.length > 1)
{
thetitles=""
for (i=0; i<thetitle.length-1; i++)
thetitles += thetitle[i] + "\r\n"
current.title = thetitles
}
else current.title = text
}
else if (document.layers)
{
document.tooltip.document.write(
'<layer bgColor="#FFFFE7" style="border:1px ' +
'solid black; font-size:12px;color:#000000;">' + text + '</layer>')
document.tooltip.document.close()
document.tooltip.left=e.pageX+5
document.tooltip.top=e.pageY+5
document.tooltip.visibility="show"
}
}
function hidetip()
{
if (document.layers)
document.tooltip.visibility="hidden"
}
</script>
</head>
<body>
<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 the two JavaScript functions showtip() and hidetip() to your page, you are now ready to begin adding ToolTips.
To add a ToolTip to an a or area tag, you simply need to add onmouseover and onmouseout 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.
