I have been so very busy hacking away on this latest version of Tooltip.js and I think that it offers major enhancements over previous versions.
The changelog is as follows:
- Major Feature Enhancements!
- Add ability to hide current Tooltip when clicking anywhere in the document, or opening another Tooltip (on by default, Tooltip.autoHideClick)
- When autoHideClick is on, don’t hide current tooltip when clicking on an element when the element is a child of the Tooltip and it does not have a class of ‘close’
- Add ability to have the Tooltip move with the mouse (off by default, Tooltip.autoFollowMouse)
- Add ability to automatically hide the Tooltip after a timeout. (40 seconds default, Tooltip.autoHideTimeout)
- Add ability to have the Tooltip displayed where the mouse clicked and stay there for the duration of that show event. The Tooltip will automatically find the edge of the screen and *will* stay within the bounds of the right edge (on by default, Tooltip.autoMoveToCursor)
- Add ability to set the “Close” link text that is auto-added (“Close” by default, Tooltip.closeText)
You can see how to use these new options in the Advanced Tricks page of the Wiki.
There is also a minor BC break from previous versions. Before, I was using the display CSS property for the show/hide effects, however this conflicts with the Script.aculo.us effects. So now I have moved to using the (more proper) visibility CSS property.
However, this means that you must set the CSS for the Tooltips to use position: absolute; to make them not distort the page layout. This is fine if you’re using the autoFollowMouse or autoMoveToCursor options, however when you want them to display in the page you start to have issues. You either have the Tooltip content going over the other content of the page (if you have a transparent background, this is just not acceptable!) or you have it in the wrong place.
So, the solution I am using on the Tooltip.js Wiki is the following in