Keep tooltip opened when the mouse is over it

0
votes

I want to create a simple tooltip using jquery. When the user hovers some link a small box should appear next to it with some dynamic content. The only thing I can't figure out it is how to keep the tooltip opened when the mouse is over the tooltip itself? If the mouse is out of the link the tooltip should be closed automatically, except when the mouse is over the tooltip itself, because there will be some links in the tooltip and users should be able to click it...

Can anyone please point out how this can be done using jquery?

4
javascriptjquerytooltip
Duplicate of this? stackoverflow.com/questions/1811529/… - mplungjan

4 Answers

2
votes

If you just want get it working, use one of dedicated plugins, e.g. qtip.

If you, for some reason, want or have to do it yourself, here's how I did it.
You do not close tooltip immediately when mouse leaves link, but setup setTimout close handler. If in, say, 0.5 seconds mouse returns over tooltip or link, you cancel handler. To do that, you can store timeout id (retured by setTimeout) as jquery data object associated with tooltip.

1
votes

Update: Its much better to use jQuery UI tooltip as of now.
URL: http://jqueryui.com/tooltip/

Rather than writing your own Tooltip use any of the jQuery Tooltip plugins available.

simpletip is a good one I had been using previously.

$("jquery selector").simpletip({
   fixed: true
});
0
votes

If there is no space between link and tooltip, simply let the tooltip be the child node of the link and use mouseenter and mouseleave events on the link.