ansaurus

Question

Answer 1

A:

The problem is the mouse enter the <a> but then it's on the tooltip element, so you need to split the hover, like this:

$('body').append('<div id="tooltip"></div>');
var tt = $('#tooltip');
$('a.tooltip').each(function(){
    $(this).data('title', this.title).attr('title', '');
}).mouseenter(function(){
    var t = $(this), o = t.offset();
    tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast');
});
tt.mouseleave(function() {
  $(this).stop().hide();
});

You can give it a try here, since the mouse over occurs on the <a>, add the .mouseeenter() to it. But, since you're then over the #tooltip on top of the <a>, to hide it you need the .mouseleave() on the #tooltip itself.

What's happening currently is it starts to .fadeIn(), but as soon as it does so the mouseleave event happens (since #tooltip isn't a child), so the display: none; is triggered (you can use .hide() here). The display:none; does happen, but the next interval of the fade just reverses it, so you end up with a faded-in element. To prevent that in the mouseleave handler above, we've added .stop() to stop further fading for this hover.

Nick Craver 2010-08-11 11:17:05

Thanks Nick :) - Works Fine Now

Jens 2010-08-11 11:24:50

@Jens - Welcome :) Be sure to accept answers on this and future questions via the check beside the one that helped, it'll help you get more responses as you go (high accept rate == appealing). Last but not least, welcome to SO!

Nick Craver 2010-08-11 11:28:16

ansaurus

tags:

views:

answers:

jQuery Tooltip Problem (Position/Hover)

related questions