Navigation Button

Dynamic HTML Tooltips

Chances are you've seen the little tooltip windows that open up when you mouseover a graphic image on a web page. It comes from the alt attribute of the <IMG> HTML tag. But did you know you can create the same effect with text using DHTML?

Move your mouse pointer over this text to see what we mean.

This text box is hidden from
view when the page loads,
but is revealed when the
mouse hovers over the text
anchor. Cool huh?

Besides changing the visibility property of that hidden text box, did you notice it even appeared over the text of this paragraph? This is a good demonstration of the true dynamic nature of DHTML. It allows the page to change without having to be refreshed. Imagine the wear and tear and bandwidth saved on your server by not having to reload the page to make changes in appearance. Now, we know what you're thinking. Gee, if I can do that, can I make it dynamically display an image? Swami Netbro says, let it be so.

All you can do is try, right?

OK, How Did You Guys Do That?

Glad you asked. Like most DHTML, it's done with a combination of JavaScript and Cascading Style Sheets. One warning to be aware of is that Netscape Navigator 4+ CSS support can be disabled independent of JavaScript. It is possible to discover that the layer object you are intending to manipulate is not present. Therefore always check the existence of the object before attempting to access its properties. This can easily be achieved by testing whether the object reference is equal to null. For example: if (document.layers[layerId] != null). In this case, the layer is present, so it can be manipulated. Here are the <SCRIPT> and <STYLE> code blocks that will make tooltips work for you.

Put this script and style code in the <HEAD> section of your page.
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
	if (document.layers && document.layers[object] != null)
	    document.layers[object].visibility = 'visible';
	else if (document.all)
	    document.all[object].style.visibility = 'visible';
function hide(object) {
	if (document.layers && document.layers[object] != null)
	    document.layers[object].visibility = 'hidden';
	else if (document.all)
	    document.all[object].style.visibility = 'hidden';
<STYLE TYPE="text/css"><!-- .myStyle { position: absolute; visibility: hidden; } //--></STYLE>


Here are the anchor tags that activate the DHTML tooltips.
<A HREF="#" onMouseover="show('myLayer1')"
    onMouseout="hide('myLayer1')">Move your mouse
    pointer over this text to see what we mean.</A>
<DIV ID="myLayer1" CLASS="myStyle">
This text box is hidden from<BR>
view when the page loads,<BR>
but is revealed when the<BR>
mouse hovers over the text<BR>
anchor. Cool huh?

<A HREF="#" onMouseover="show('myLayer2')" onMouseout="hide('myLayer2')">All you can do is try, right?</A> <DIV ID="myLayer2" CLASS="myStyle"> <TABLE BGCOLOR="#FFFFB0"><TR><TD> <img src="fundhtml.gif" border="0" width="120" height="69"> </TD></TR></TABLE> </DIV>

Please let us know if this tip was helpful to you, or if you have anything you don't understand, by sending us email or visiting the comments page. If you want to see how we implemented the tooltip DHTML feature here at Internet Brothers, take a look at our Observations page.

Was this site useful to you?
Vote For Us at WebbieWorld

Helpful TipTo print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Our Lovely Email Icon    another darn bug







A neutron goes into a bar and asks the bartender, "How much for a beer?" The bartender replies, "For you, no charge."







Did you hear about the Buddhist who refused his dentist's Novocain during root canal work? He wanted to transcend dental medication.

Copyright 1997-present Internet Brothers. All Rights Reserved. Really.