Dynamic Tooltips: Assigning Tooltips by URL - Doc JavaScript

Assigning Tooltips by URL

By now we all know how to create useful tooltips. But our technique has several disadvantages:

• In order to add tooltips to our pages, we must change the HTML code for the desired links.
• In order to associate the same tooltip with multiple links, we must explicitly attach the tooltip to each of those links.

We'll solve these issues by assigning the same tooltip to all links on the page that refer to the same URL. Let's start by redesigning the interface of makeEl(). The function now needs to receive the width of the tooltip, its content, and the URL with which it matches:

makeEl(300, "A web site about creating web sites. -->
With thousands of select, annotated links, hourly -->
web news, noted columnists, and free services this -->
is webmaster <I>nirvana</I>.", "https://www.webreference.com/", -->
"https://www.webreference.com/index.html");
makeEl(300, "Let our leading experts keep you up to -->
date with the latest developments, featuring the columns -->
you need. Each is a respected author in their chosen -->
field.", "https://www.webreference.com/experts/");
makeEl(300, "A JavaScript how-to column with biweekly -->
prescriptions, that are sure to improve your JavaScript -->
health. Shows readers how to utilize the latest JavaScript -->
features.", "https://www.webreference.com/js/");

The first argument reflects the desired width, while the second one specifies the HTML code for the content of the tooltip. The third argument is the corresponding URL. If you want to associate the tooltip with multiple URLs, simply specify them as additional arguments. The first statement in the preceding script calls the makeEl() function with four arguments -- two URLs. Let's take a look at the body of the function:

function makeEl(width, code) {
  if (!style) return;
  var id = "tip" + (num++);
  var args = makeEl.arguments;
  for (var i = 2; i < args.length; i++) {
    for (var j = 0; j < document.links.length; j++) {
      if (document.links[j].href == args[i]) {
        document.links[j].tooltip = id;
        document.links[j].onmouseover = activateEl;
        document.links[j].onmouseout = clearEl;
      }
    }
  }
  var str = "<STYLE TYPE='text/css'>";
  str += "#" + id + " {";
  str += "width: " + width + ";";
  str += "}";
  str += "</STYLE>";
  str += "<DIV CLASS='tooltip' ID='" + id + "'>" + code + "</DIV>";
  document.write(str);
}

You probably noticed the new variable -- num. We define this variable in the global section of the script:

var num = 1;

We use this variable to generate on-the-fly names for our tooltips. Our naming scheme is: tip1, tip2, etc. Note that we would have used random names if it were easier, because the actual name has no significance.

The function assigns its array of arguments to a local variable named args. Thus, the third argument is args[2], the fourth one is args[3], and so forth, while the total number of arguments is args.length.

The first for statement loops through the function's arguments, starting from the third one. For each argument (the arguments are the URLs), the function loops through the links on the page, which are all members of the document.links array. If a link's URL is equal to one of the function's arguments, the current tooltip is attached to that link by:

• setting the link's onmouseover event handler to activateEl.
• setting the link's onmouseout event handler to clearEl.
• adding a new property, named tooltip, to the link's object, and assigning it the name of the current tooltip (tip1, tip2, etc.).

Let's take a look at the revised activateEl() function:

function activateEl(e) {
  active = this.tooltip;
  if (NS4) document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = checkEl;
  checkEl(e);
}

For your reference, our pevious activateEl() function was:

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

The most obvious difference is that the new function isn't terminated if stylesheets are disabled. Since makeEl() is responsible for assigning the event handlers to tooltip-enabled links, activateEl() isn't invoked if the browser doesn't support stylesheets.

The only other difference is that our new version accepts only one argument -- the event object for Navigator. We need to pass this parameter to the checkEl() function, which uses it to extract the current position of the mouse.

Notice that the function retrieves the name of the active tooltip through this.tooltip. The keyword this reflects the link whose onmouseover event handler called the activateEl() function. As explained earlier, we added a property named tooltip to all tooltip-enabled links on the page. It holds the name of the corresponding tooltip (the ID attribute of its DIV element). Note that the following code serves as an alternative to this.tooltip:

(NS4) ? e.target.tooltip : event.srcElement.tooltip

Another interesting point is that you don't have to include any additional script at the beginning of the document, because the script itself assigns the event handlers to the desired links. For older browsers (less than 4.0x), the event handlers simply don't exist, so there's no risk.

Last but not least, we suggest that you specify a base URL for the page. For instance, the base URL for this page would be:

<BASE HREF="https://www.webreference.com/js/column16/">

This tag should be placed at the beginning of the document, in the <HEAD>...</HEAD> portion. The reason we need to specify a base URL is that a link's href property holds its full URL, even if its HREF attribute specifies a relative one. There is usually more than one way to access a server (e.g., www.webreference.com, webreference.com, webreference.internet.com), so it is best to implement a base URL.

That's all there is to it. The next section of the column lists the entire code for this technique.