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:

Paramaters

Examples

Using ID

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.

AttributeValueDescription
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)
borderStyleStyle of the border using CSS (solid, outset, inset, etc)
borderWidthWidth of the border in pixels
borderColorThe 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%

Text and/or HTML

Link Sample

onmouseover Method:

This code needs to go in the tag of the element

ID Method:

Element ID:
The element that this tool tip is for must have this id, and this code needs to be run in the onload="onLoadHandler()" of the body tag

Title Method:

This code needs to go in the tag of the element



Browser Compatability

At this point I think that the tool tips will basically work in all the browsers that support DOM level 1 or newer. Here are the browsers that I have tested.
Firebird 0.6.1 Everything works except fade in
Firefox 1.0.7 Everything works
MSIE 5.2 Mac It works, except I couldn't get window.setTimeout() to work at all, so delay and fadeOut won't work, opacity probably isn't supported anyway
MSIE 6 Everything Works
Netscape 4.8 Nothing works, doesn't support DOM 1
Netscape 6.0 Everything works except fade in, I don't think NS supported opacity until version 7.2
Opera 5 and 6 Doesn't support the DOM. The default title attribute works for links and images but not inputs and buttons.
Opera 7.03 Everything works except the fade in, apparantly Opera doesn't support opacity
Opera 8.50 Everything works except the fade in, apparantly Opera doesn't support opacity
Phoenix 0.1 & 0.5Everything works except the fade in
Safari 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().