Tool Tip

Using onmouseover

If you want to create the tool tip inside the onmouseover handler of a link or other element, you need to call
one of the following functions within the onmouseover attribute of the element:

ToolTip.create(this, html, params) - Creates a tool tip on the first mouseover,
then just hides it or makes it visible again on later mouseover and mouseouts. I suggest this method because
several times while I've been testing the onmouseout event has failed to fire, thus leaving the tool tip displayed.
However, when you mouse over the element again, the same tool tip is reused and moves with the mouse rather than
getting stuck like it would if it was created with ToolTip.refresh()

ToolTip.refresh(this, html, params) - Creates a new tool tip each time, you will only want to use this if the contents of the tool tip change from one mouseover to the next

Paramaters

this - is a reference to the link

html - is the text and/or html that will be displayed in the tool tip

params - is the paramater for the tool tip in name = value pairs seperated by spaces or commas

Examples

Using ID

The ID method just makes it easy to seperate your tool tip code from the html. Instead of putting all the tool tip code
or text inside the attributes of the element, you can just give the element an id and then get the element in your javascript
code and add the tool tip to it.

In the onload attribute of the body tag you need to call the function that will create the tool tip for each element, I'm using ToolTip.initByID()

Inside this function, you need to first get the element with var element = document.getElementById('elementId')

then add the tool tip to it by calling ToolTip.add(element, html, params);

Another advantage of this method is that the html paramater to ToolTip.add() doesn't need to be text of html, it can be a
DOM object that you either create using the DOM as I've done in the first example (see the ToolTip.initByID function) or you
you could use some other element in the document, var html = document.getElementById('someOtherID'); If you created the
element, you will need to be sure to set it's position to absolute, else it won't show up in the right place.

Examples

Using title

This is the method I suggest if you are only going to use text in the tool tip. Simple put the text inside the title attribute
of the element. Inside the onload attribute of the body tag you will need to call ToolTip.initByTitle(). This function
will go thru all the tags in the document given in the ToolTip.tags array ('a', 'input', 'img', but you can add any tags to this array),
add tool tips to each element that has a title, and remove the title so it won't be displayed by the default browser rendering.
The advantage here is that the title attribute is being used in it's intended way, so browsers that don't run javascript will
still display the text of the tool tip in the default way. The text/html of the tool tip should be marked within the title
with html=..... and the params should start with params=....

Tool Tip Creator

This form can help you experiment with the different params for a tool tip. Mousing over each input box will show the
effect of that setting with all other settings on default. Mousing over the button, link, or image below the inputs
will show the tool tip with all the settings from the input boxes. Clicking the "Get Tool Tip Code" button will generate
the code needed for each of the 3 methods, but you should only use one of these methods. In the interest of keeping the
params string short, values from the inputs that are the same as default values will not be added to the params string.

Attribute

Value

Description

offsetX

The distance the tool tip will be spaced from the right of the cursor in pixels

offsetY

The distance the tool tip will be spaced below the cursor in pixels

className

CSS class, but other params given to the Tool Tip like fgColor would take priority over definitions in the class

height

The height of the tool tip in pixels, if set to 0 the tool tip will conform to the size of it's contents, just like any other span element.

width

The width of the tool tip in pixels, if set to 0 the tool tip will conform to the size of it's contents, just like any other span element.

bgColor

The background color of the tool tip as a CSS string (#0EC, #EE00AA, rgb(123,99,37), etc)

fgColor

The text color of the tool tip as a CSS string (#0EC, #EE00AA, rgb(123,99,37), etc)

borderStyle

Style of the border using CSS (solid, outset, inset, etc)

borderWidth

Width of the border in pixels

borderColor

The color of the border as a CSS string (#0EC, #EE00AA, rgb(123,99,37), etc)

padding

Padding inside the tool tip in pixels

zIndex

Must be greater than the z-index of elements over which the tool tip will be displayed

timeDelay

Time delay in milliseconds before the tool tip will be displayed

fadeIn

Time in milliseconds that it will take for opacity to go from 0 to 100%

It works over buttons and images, but over links the browser fires onmouseout events whenever the mouse moves, so the tool tip gets hidden then displayed again. I tried other tool tips, and most of them do the same thing. Well nevermind, I came up with a hack that fixed the problem. In Safari I delay hiding the tool tip for 50ms, if the link gets an onmouseover event before that time, the timeout is cleared and the tool tip doesn't get hidden. Still doesn't work with ToolTip.refresh().