Inside Technique : HTML Tooltips
By Scott Isaacs

This article demonstrates a cross-browser technique for HTML tooltips based on Steve Gore's IE4 DHTML Library. With HTML Tooltips, each time the mouse moves over an anchor, you can have a description popup in a small window. To see an example (the page must be fully loaded), move your mouse over the above link to Steve Gore's library. If you are running Internet Explorer 4.0 or Netscape Navigator 4.0, a description will be displayed in a popup window. In down-level browsers, nothing will happen.

Using this technique requires almost no knowledge of scripting. To allow easy customization, we took advantage of the event models of both browsers to generically detect and display any specified tooltips without the need for any complex arrays or data structures. For example, the link and tooltip to Steve Gore's library is defined as follows:

  <A HREF="/tips/steveg/page1.asp" 
     ONMOUSEOVER="this._tip='Steve <FONT COLOR=red>
                              <B>simplifies</B></FONT> 
                             DHTML with his powerful library'">
       Steve Gore's IE4 DHTML Library
  </A>

The tooltip is set by adding a _tip property to the element in the onmouseover event. All the magic to display the tooltip is handled indepedent from the link. Over the next few pages, we explain the techniques used to author this example.

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