Dynamic Tooltips: Displaying a Tooltip - Doc JavaScript

Displaying a Tooltip

In the previous section we discussed the checkEl() function, and how it invokes displayEl() after 300 milliseconds of no mouse movement. Take another look at the statement that installs the new timeout:

timerID = setTimeout("displayEl(" + left + ", " + -->
top + ")", 300);

As you can see, displayEl() is called with two numeric arguments -- the coordinates of the tooltip's top left corner. Let's take a look at the displayEl() function:

function displayEl(left, top) {
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
  var whichEl = (NS4) ? document[active] : -->
document.all[active].style;
  whichEl.left = left;
  whichEl.top = top;
  whichEl.visibility = (NS4) ? "show" : "visible";
}

Since the displayEl() function displays the tooltip, the browser doesn't need to continue capturing mouse movements. The first statement releases the document.onmousemove event handler (only Navigator requires this statement). The second one then deactivates the event handler for both browsers by assigning it a null value.

The function assigns a reference of the active tooltip element to a local variable -- whichEl. Because the element's ID attribute is stored in a variable (active), we must evaluate it using the square brackets (also known as array notation). Navigator 4.0x refers to all first-level elements as properties of the document, while Internet Explorer 4.0x lists them as properties of the document.all object. Furthermore, Explorer accesses the style attributes of an element through the style property, while Navigator features them as properties of the element itself.

Due to the fact that the element's ID attribute is stored in a variable, it must be parsed. Since square brackets must be specified after a parent object, we must use document.all. In general, Explorer also exposes its elements by their names. Thus, the following statement is equivalent to the original one:

var whichEl = (NS4) ? eval("document." + active) : -->
eval(active + ".style");

And in the same spirit, the following statement also does the job:

var whichEl = eval((NS4) ? "document." + active : -->
active + ".style");

After making a reference of the necessary object, the function sets its left and top properties to the value of the function's left and top parameters. Now that the element is in its final position, it can be revealed:

whichEl.visibility = (NS4) ? "show" : "visible";

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

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