Imitating browsers default tooltip
The first two images show the browser's default tooltip and the last two show the jQuery Tools tooltip. We are trying to mimic the standard browser behaviour.
- Appearance and dimensions can be tweaked.
- The tooltip can contain any HTML element.
- You have full control over the positioning.
- You can move the cursor on top of the tooltip so you can use links or forms inside of them.
- You can control the delay in showing or hiding the tooltip before and after your mouse moves over the trigger element.
- You can change the show/hide effect.
- Everything is scriptable and you can even make your own tooltip plugins.
Our HTML structure is identical to the basic setup. Here we have a single tooltip element and this is how it has been styled:
Note: we are using a drop shadow for the latest browsers, i.e. the latest versions of Firefox, Safari, Konqueror and Chrome.
Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual.