Dynamic Tooltips: Determining when to Display a Tooltip - Doc JavaScript

Determining when to Display a Tooltip

The activateEl() function is invoked when the user passes the mouse over a link, triggering the link's onMouseOver event handler. Here's the code for the activateEl() function:

function activateEl(id, e) {
  if (!style) return;
  active = id;
  if (NS4) document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = checkEl;
  checkEl(e);
}

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 function stores the name of the active tooltip (the ID attribute of its DIV element) in a global variable named active. Notice that this variable is first defined in the function, but we do not use the preceding var keyword because the variable is global. Navigator requires the captureEvents() method to capture events at the document level:

if (NS4) document.captureEvents(Event.MOUSEMOVE);

We assign a reference of the checkEl() function to the document.onmousemove event handler, so checkEl() is invoked every time the user nudges the pointer in any direction. When the user moves the mouse over a link, a mousemove event occurs, followed by mouseover. In case the user moves the mouse over a tooltip-enabled link, but stops there, we must explicitly call the checkEl() function for the first time (handing it the event object). Let's take a look at the checkEl() function:

function checkEl(e) {
  if (timerID) clearTimeout(timerID);
  var left = (NS4) ? e.pageX : event.clientX + -->
document.body.scrollLeft;
  var top = (NS4) ? e.pageY + 20 : event.clientY + -->
document.body.scrollTop + 20;
  timerID = setTimeout("displayEl(" + left + ", " + -->
top + ")", 300);
}

The function first checks if timerID is not null. In other words, it clears the current timeout if one exists. A quick glance at the function's last statement reveals the secret. checkEl() instructs the browser to call displayEl() after 300 milliseconds. displayEl() then displays the active tooltip. But in the meantime, if the user moves the mouse, the document.onmousemove event handler invokes checkEl() again. checkEl() then clears the current timeout and installs a new one, so the 300 millisecond timeout restarts. Consider the following situation:

1. The user moves the mouse over a tooltip-enabled link.
2. A mouseover event occurs, calling the activateEl() function that installs the document.onmouseover event handler. The activateEl() function then invokes checkEl() which assigns a 300 millisecond timeout to timerID.
3. After 100 milliseconds, the user then moves the mouse a bit, while keeping the pointer over the link (so a mouseout event doesn't occur).
4. The document.onmouseover event handler calls checkEl(), which clears the current timeout and sets another 300 miilisecond timeout.
5. The user keeps the mouse still, so the tooltip pops out after 300 milliseconds; that is, 400 milliseconds after he or she first moved the mouse over the link.

After clearing the current timeout (if needed), the checkEl() function computes the new left and top positions of the tooltip box. Both values are extracted in one way or another from the event object. Explorer accesses the event object as a property of the window object, while Navigator references the function's parameter, e. The document.body.scrollLeft and document.body.scrollTop properties are added to event.clientX and event.clientY (respectively) for Explorer, because we are interested in the pointer's coordinates with respect to the top left corner of the page, rather than the top left corner of the current window.

Navigator retrieves the x and y coordinates directly through the event object's pageX and pageY properties. Regardless of the browser, we add 20 pixels to the vertical coordinate so the top left corner of the tooltip box appears 20 pixels below the pointer. The cross-browser variables, left and top, are handed to displayEl() when it is finally called.

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

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