Warning this feature only works in Internet Explorer 4.0 or bettter!

This page demonstrates the use of my own built tooltip. It allows you to have any HTML you like as tooltips. Not just text as IE4's built in TITLE attribute.

Demo area:


This is a link

This is a paragraph Inside a DIV. More text

If no tooltip is present the one in the parent object tree will be used.

Use different background and border styles!

As you can see if you hover over the i in heading that using both TITLE and TOOLTIP in the same tag isn't very nice. Since these two are not compatible with each other they don't know how to to hide the other when they are displayed (hmm... did you understand that?) You should also be carefull when you write the TOOLTIP because the string is enclosed in qoutes.

Below is a little bit code that shows you how to use the TOOLTIP. It really needs no explaining. One thing though. If you don't like the borders or the background color you should add the attribute TOOLTIPSTYLE="any CSS value you like" (don't change the position or the display). The default value for this is "background: infobackground; color: infotext; font: statusbar; padding: 1; border: 1 solid black".

If you wan't to decide the width (or height) of the tooltip you can use a DIV with width declared inside the tooltip.
Remember the tag <NOBR> which prevents the text to wrap (there is also an attribute called nowrap that works for DIV and table cells.
The attributes for the tooltip is NOT case sensitive.

<a href="." tooltip="<img src='home.gif' border=0 align=absmiddle>Check what else
I'm working on!">This is a link</a>

Q: What do I need to use this cool feature?
A: You need to download the code and include the following line in your HTML document.

<script language="Javascripts" src="tooltip.js"></script>

Q: Will I see an upgrade soon?
A: I actually made the first one already :-). Added the TOOLTIPSTYLE! I would like to fix the position so that it display just below your mouse pointer even when it isn't default or hand. (Since different pointers have their focus point at differnt positions you have to change the style.top acordingly. I also would like to fix the position so that the TOOLTIP is displayed outside your Explorer window.

Author: Erik Arvidsson