Question

I want to use the tipsy tooltip as a toolbar. When hovering a link I would like the toolbar to show, let’s say a div, and when entering the toolbar area I want it to stay visible, not hide. So my questions are:

• How do I show a hidden div?
• How do I keep the tooltip visible when entering the tooltip area?

Answer 1

Tipsy supports “manual” triggering. So what you’d want to do is have the “onmouseover” event on your link call the tipsy('show') function, and then for the hiding part, well… probably do two things: when you do your show, set a timeout that auto-hides after x seconds. Then also set a onmouseout event for your tooltip that calls tipsy('hide').

EDIT: changed the code to something that actually works, see here: http://jsfiddle.net/6FpM8/3/ Thanks to @Josh for poking me to get it working.

var timer;

//setup the toolbar and tipsy
$('#mylink').attr('title','Input here:<input id="toolbar">');
$('#mylink').tipsy({trigger:'manual',gravity:'w', html:true});

//.tipsy class is what the generated tooltip divs have, so we use the 
//live event to link the mouseover/mouseout events
$('.tipsy').live('mouseover',function(e){
  clearTimeout(timer);
});
$('.tipsy').live('mouseout',function(e){
  timer = setTimeout("$('#mylink').tipsy('hide');",3000);//hide the link in 3 seconds
});

//manually show the tooltip
$('#mylink').bind('mouseover',function(e){
   $(this).tipsy('show');
 });