CODEWITHSUNDEEP
jquerytooltip
Johan Wallberg
Johan Wallberg

Reputation: 107

Keep Tipsy tooltip from fading out when mousing over

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:

Upvotes: 0

Views: 3277

Answers (2)

Jerry Neumann
Jerry Neumann

Reputation: 425

I did this by altering Tipsy itself. Tipsy attaches the tooltip element to the document.body, in the Tipsy.prototype's show method:

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(document.body);

If you change the tip to be a child of the triggering element, then jQuery mouseleave won't fire if you are in the tooltip:

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(this.$element[0]);

In my case, I have a div with the title attribute that holds the tip, and the div holds the image that the user is targeting. (I don't know if this would work if the element holding the tip is childless, like an img.) I enable Tipsy on the div.

Upvotes: 0

Ryley
Ryley

Reputation: 21226

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');
 });

Upvotes: 3

Related Questions