Dynamic Tooltips: Clearing a Tooltip - Doc JavaScript

Clearing a Tooltip

When the user removes the mouse from a tooltip-enabled link, the link's onMouseOut event handler calls the clearEl() function (with no arguments). For example:

<A HREF="/js/" onMouseOver="activateEl('javascript', event)"
  onMouseOut="clearEl()">javascript</A>

Let's take a look at the body of the clearEl() function:

function clearEl() {
  if (!style) return;
  var whichEl = (NS4) ? document[active] : -->
document.all[active].style;
  whichEl.visibility = (NS4) ? "hide" : "hidden";
  active = null;
  if (timerID) clearTimeout(timerID);
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
}

As in activateEl(), the first statement terminates the function if stylesheets are disabled. We must install this statement at the beginning of all functions that are called by event handlers.

The second statement, as explained in the previous section, assigns a reference of the desired object to a local variable. This is a short and simple way to create cross-browser references.

The next statement hides the current tooltip by assigning the corresponding value to the element's visibility property. For Navigator, the correct string is "hide" while Explorer expects the string "hidden".

The moment the tooltip is cleared, there is no active tooltip, so active is set to null. If a timeout is currently running, the clearTimeout() method is called to clear it. Let's assume the user moves the mouse over a tooltip-enabled link, and then removes it, without waiting enough time for the tooltip to display. Since the document.onmousemove event handler is disabled, checkEl() isn't called anymore, so the most recent timeout remains active. The displayEl() function is scheduled to run in another 300 milliseconds, so the timeout must be cleared.

Finally, the function dismantles the document's onmousemove event handler, because no tooltip is currently active; that is, the pointer isn't positioned over one of the page's tooltip-enabled links.

The next page lists the entire code for this technique. Be sure to continue reading after you take a look at the script, because we'll show you how to display these tooltips without having to explicitly add event handlers to each link.

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

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