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 onmouseover, no other events
• Has other onmouseover and onmouseout events that change link color

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 the id tag and an element created by the DOM
  
• Using the id tag

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=....

• Using the title attribute, html tag and params tag
• Using the title attribute, html tag but no params
• Using the title attribute, no html but params given
• Using the title attribute, html not specified but present, has params tag
• Using the title attribute, no html or params tag
• Using the title attribute, with other onmouseover and onmouseout events that change link color

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%
Text and/or HTML The text/html that will be displayed in the tool tip, this is the second argument to showToolTip()
	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