tags:

views:

40

answers:

1

Hello,

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?
A: 

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');
 });
Ryley
I've tried this myself and would love to up-vote your answer, but haven't gotten this to work myself. Have you tried this yourself and had it work?
Josh Smith
@Josh, yes I just set it up now, seems to work as I imagined: http://jsfiddle.net/6FpM8/
Ryley
@Ryley: Maybe I'm missing something here, but that tooltip doesn't have the id `mytoolbar`. And when using the class `tipsy` it still doesn't work.
Josh Smith
indeed, I wasn't paying very close attention there... How about this: http://jsfiddle.net/6FpM8/3/
Ryley
@Ryley, that works splendidly. I'm trying to get this manual triggering to work with `delayIn`. Would appreciate your help here: http://stackoverflow.com/questions/3758657/jquery-tipsy-manual-triggers-and-delayin
Josh Smith