spacer

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

home / experts / javascript / column16


Displaying a Tooltip

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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

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