spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column16


Displaying a Tooltip

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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";

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


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

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