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:
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=....
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.
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.5 | Everything 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(). |