Inside Technique : Interactive Tooltips : Setting up the Tooltip

You have now seen the complete script and are ready to create interactive tooltips. Creating an interactive tooltip is very simple. First you need to define your tooltip as HTML. We create our toolitps using the TABLE element because the table element automatically sizes itself to its contents. The TABLE element must have the positon attribute set to absolute, have its display property set to none, and have a unique ID. To simplify setting up our tooltips, we define all the shared style information as a tooltip class:

<STYLE>
  .tooltip {display: none; position: absolute; background: white}
</STYLE>

Now we create the tooltip as follows. The tooltip can be as simple or as rich as you like.

<TABLE CLASS=tooltip 
  ONMOUSEOVER="stopTimer()" 
  ONMOUSEOUT="startTimer(this)" 
  BORDER 
  ID=popup>
<TR><TD>Item 1</TD></TR>
<TR><TD>Item 1</TD></TR>
<TR><TD>Item 1</TD></TR>
</TABLE>

Next you need to add a small script at the point you want the tooltip to appear. When the mouse moves over the text you need to call the showDetails() function passing the string ID of the tooltip.

<A HREF="gohere.htm" 
   ONMOUSEOVER="showDetails('popup')" 
   ONMOUSEOUT="startTimer(this)">
  Display the popup  
</A>

An interesting use of the interactive tooltip is as a shortcut for options on the next page. For example, below we create an interactive tooltip for our developer's paradise section. You can either click on the link and go to developer's paradise or choose an option from the tooltip popup to go to a sub-area in developer's paradise:

The showDetails() function also supports two optional arguments for specifying a fixed top and/ or left position for the element. The primary purpose of these arguments is to line up multiple tooltips to create a popup menu. For example:

In the above menu, notice that we reused the same tooltip for both instances of Developer's Paradise. This is accomplished simply by specifying the same ID for the showDetails function.

This concludes our explanation for adding interactive tooltips to your web page. On the next page you can get the complete script for creating your own tooltips.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.