Dynamic Tooltips: Constructing a Tooltip - Doc JavaScript

Constructing a Tooltip

A tooltip element is nothing more than a plain HTML DIV element. By utilizing the CLASS attribute, we can assign the same set of style definitions to each tooltip. The basic syntax of our tooltip is as follows:

<STYLE TYPE="text/css"&gt
#id {
  width: width;
}
&lt/STYLE>
<DIV CLASS="tooltip" ID="id">code</DIV>

where id is the value of the DIV element's ID attribute, width is the width of the tooltip box, and code is the text to be displayed in the tooltip box. Note that the specified text may also include other HTML definitions, such as images, tables, and styling tags. The tooltip class designates a general stylesheet for the tooltips on the page. It defines the background color, padding, border color, and other common attributes for the tooltips. The makeEl() function prints the HTML code for each tooltip:

function makeEl(id, width, code) {
  if (!style) return;
  var str = "<STYLE TYPE='text/css'&gt";
  str += "#" + id + " {";
  str += "width: " + width + ";";
  str += "}";
  str += "&lt/STYLE&gt";
  str += "<DIV CLASS='tooltip' ID='" + id + "'&gt" + -->
code + "&lt/DIV&gt";
  document.write(str);
}

The function accepts three arguments: id, width, and code, as defined above. Our example features three tooltips, so we'll call makeEl() three times, once for each tooltip:

makeEl("home", 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>.");
makeEl("experts", 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.");
makeEl("javascript", 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.");

As you can see, the function's third argument specifies the HTML code for the content of the tooltip. It may include any valid HTML tags.

The first statement in makeEl() terminates the function if style is false. style is a global variable that indicates whether or not stylesheets are enabled. Our script cannot work without stylesheets. We'll discuss this variable in the next section of the column.

The makeEl() function prints a distinct stylesheet for each tooltip:

<STYLE TYPE="text/css"&gt
#id {
  width: width;
}
&lt/STYLE>

It then associates the tooltip element with its stylesheet via the ID attribute. If we were dealing with pure HTML, we would use the STYLE attribute instead of embedding a stylesheet for each element:

function makeEl(id, width, code) {
  if (!style) return;
  var str = "<DIV CLASS='tooltip' ID='" + id + "' -->
STYLE='width: " + width + ";'&gt" + code + "&lt/DIV&gt";
  document.write(str);
}

Due to a bug in Navigator 4.0x, we cannot use the the STYLE attribute, so we print the code with JavaScript instead. As we know, Navigator needs to know the wrapping width of an element before it is created. If omitted, it will wrap at the right of the page. Explorer can assign a value to the width property at any time, but we'll keep the code compact by doing so beforehand. We must specify the width property before the element is created. The element's height is adjusted according to the element's content.

Take another look at our original function. The HTML attributes (TYPE, CLASS, and ID) require quotes. Since we use double-quotes to delimit the string, single-quotes are used for the attributes. CSS attributes don't take quotes, so the width property is followed by the value of the width parameter -- an integer.

As you will see in the next section of this column, the tooltips are absolutely positioned. In Navigator 4.0x, absolutely positioned elements get messed up when the browser window is resized. Therefore, we'll instruct the browser to reload the page if the user happens to resize the window. In theory, the code would be:

function redo() {
  window.location.reload();
}
if (NS4) window.onresize = redo;

Navigator-specific code is green, and Explorer code is red. The preceding script segment doesn't include any code specifically for Explorer, so there is no red text. We will use this color scheme throughout the column for scripts that differ between Navigator and Explorer.

The preceding code segment isn't necessary if style sheets are disabled, because the script doesn't print any HTML code. Other than that, it worked fine -- until Netscape introduced Navigator 4.04. On Navigator 4.04, a resize event occurs when the page loads. Our redo() function then reloads the page, and a resize event occurs (again). This process traps our page in a loop -- the page reloads continuously. We'll solve the problem by setting the window.onresize event handler one second after the page loads:

function init() {
  setTimeout("window.onresize = redo", 1000);
}
function redo() {
  window.location.reload();
}
if (style) {
  .
  .
  .
  if (NS4) window.onload = init;
}

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

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