Dynamic Tooltips: Associating a Tooltip with a Link - Doc JavaScript | WebReference

Dynamic Tooltips: Associating a Tooltip with a Link - Doc JavaScript


Associating a Tooltip with a Link

Tooltips are displayed and hidden by connecting them to standard event handlers: onMouseOver and onMouseOut. The following code segment demonstrates:

<A HREF="/"
   onMouseOver="if (NS4 || IE4) activateEl('home', event)"
   onMouseOut="clearEl()">home</A> /
<A HREF="/experts/"
   onMouseOver="if (NS4 || IE4) activateEl('experts', event)"
   onMouseOut="clearEl()">experts</A> /
<A HREF="/js/"
   onMouseOver="if (NS4 || IE4) activateEl('javascript', event)"
   onMouseOut="clearEl()">javascript</A> / column16

The activateEl() function activates a tooltip, but it doesn't display it. Once the tooltip is active, the browser keeps track of mouse movements. Only after the mouse hasn't moved for a given amount of time, it displays the corresponding tooltip.

Notice that you must hand the name of the desired tooltip (the ID attribute of its DIV element) to the activateEl() function. Multiple links can share the same tooltip by invoking the function with the same argument. For example:

<A HREF="/"
   onMouseOver="if (NS4 || IE4) activateEl('home', event)"
   onMouseOut="clearEl()">home1</A>
<A HREF="/"
   onMouseOver="if (NS4 || IE4) activateEl('home', event)"
   onMouseOut="clearEl()">home2</A>

The onMouseOver event handler must also pass the event object to activateEl(), because activateEl() invokes checkEl() which utilizes this object. The reason we need to implement a conditional statement is that only Navigator 4.0x and Internet Explorer 4.0x support the event object. See Column 11 for more information on the event object.

When the user removes the mouse from the link, the onMouseOut event handler calls clearEl() that hides the currently active tooltip. Note that the clearEl() function doesn't accept any arguments. It "knows" what tooltip is active.

We don't want the tooltips to load before the document, because they respond to events that occur on the page. Therefore, we'll place the main script at the end of the document, right before the </BODY> tag. Let's assume the user moves the mouse over a link featuring a tooltip, but the script hasn't loaded yet. The link's onMouseOver event handler would invoke the activateEl() function, and onMouseOut would call clearEl() before those functions even loaded.

Furthermore, these event handlers are supported by all JavaScript-enabled browsers, while the script is only parsed by fourth-generation ones (thanks to the LANGUAGE="JavaScript1.2" attribute). Thus, we must define our standard browser-detection variables. Simply include the following script in the <HEAD>...</HEAD> portion of the document:

<SCRIPT LANGUAGE="JavaScript">
<!--
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
function clearEl() {}
// -->
</SCRIPT>

NS4 is true if the browser supports the document.layers object. In other words, it is true for Navigator 4.0x. The second variable, IE4, is true if the browser supports the document.all object. That is, it is true for Internet Explorer 4.0x. Note that 1 and 0 are equivalent to true and false. We use them because they are shorter.

If the browser is Navigator 4.0x or Internet Explorer 4.0x, the new definitions of the preceding functions overwrite the original (empty) definitions.

Notice that we define clearEl() as an empty function in this script. If the user is running a fourth-generation browser, the new definition overwrites this one, so the function isn't just an empty one. But since we don't want older browsers to generate errors when they encounter clearEl() (in an onMouseOut event handler), we must include an alternative definition. We don't need to initially define activateEl() as an empty function for older browsers, because it is only executed if the user is running a fourth-generation browser.

https://www.internet.com


Created: March 11, 1998
Revised: March 26, 1998

URL: https://www.webreference.com/js/column16/associate.html