Here's some code to display "tool tips". This code's been tested on Communicator 4.7, IE 5.0, Netscape 6.2, and Opera 6.0. Click here to see it work. Click here to see the code.

You can view a practical example of this code by mousing over the navigation links on the top menu bar of this page. In the PHP code for this page I dynamically generated the tool tip layers. In the example code, I use arrays to fill in the contents for the layers: linking text, URL to link to, and the tool tip text. Then I use javascript in the body of the page to write out the layers.

Interesting Links

• http://www.stopbadtherapy.com/standards.shtml: An interesting and informative page about the W3C standards and browser support for document.layers, document.all, Layers.
• http://www.oreillynet.com/pub/a/javascript/2001/06/22/layers_part_two.html: Another tutorial on cross browser layers. This'll help you understand better what the code here does as well. (Part I is here).

Tips

• Use <DIV>, not <LAYER> because Netscape 6 no longer supports it and it was never part of the W3C standards.
• document.layers[] for Netscape 4.x. document.layers[] is an array of all layers and can be referenced by index or layer name: document.layers[0] would be your first layer (in the code above, it would be layer with the linked text in it.
• document.getElementById() is supported in IE 5 and above and Netscape 6. document.getElementById is standards approved.

Suggested Uses

• Menu listings where you are limited to a small text string. You can explain where the link goes in greater detail with a tool tip.

Notes

• In Netscape 4.7 and Opera 6.0, the tool tips run off the edge of the page and don't wrap. There is a way to fix this, but I haven't bothered with it.
• The tool tips pop up where your mouse is whenever you roll over a link (or a piece of text) that has a tool tip associated with it.
• In Communicator 4.7, the tool tip has a bit of white around the yellow background. Not sure why that is.
• Communicator 4.7 needs the text to be a link to call the function that displays the tool tip. In IE & NS6, you can use the onMouseOver events with just the <div> tags.
• I tested this on IE 5.0, NS Communicator 4.7, and NS6, and Opera 6. You have to write separate layer code for IE & NS6 than for Communicator 4.7. Opera just rocks.
• Use "title" along with "alt" in the img tags for Netscape 6.0 to view the tool tip for images. NS6 doesn't display the alt tags like a tool tip anymore.
• You need a <div> for each rollover area and each tool tip.