Question

I´m trying to code a tooltip (Yes I know, I have my reasons to avoid plugins in this case) in jQuery.

Whe I show the tooltip and leave the mouse in the same place the show and hide repeats forever. It´s like the element triggers the hover event again and again and again.

I try unbind for the event but it does not work neither.

$("td.with-tooltip").mouseover( function() {

 var offset = $(this).offset();
 var baseX = offset.left;
 var baseY = offset.top;
 var inputWidth = $(this).width();
 var baseX = baseX + 50;
 var baseY = baseY - $(".desc").height();

 $(".desc div").html($(this).attr("title"));
 $(".desc").css({"position":"absolute", "left": baseX, "top": baseY }).fadeIn();

 $(this).unbind("mouseover");

}).mouseleave( function() {

 $(".desc").fadeOut();

});

What can I do?

thanks.

I solved with this code, thanks for everybody, really.

    var t;
    var xOffset;
    var yOffset;


$("td.with-tooltip").hover(function(e){ 

    t = $(this).attr("title");
    $(this).attr("title", "");

    $(".desc div").text(t);

    xOffset = $(".desc").height() + 30;
    yOffset = -20;

    $(".desc").css("position","absolute")
                .css("botton",(e.pageY + xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px").fadeIn("fast");
},
function(){
    $(this).attr("title", t);
    $(".desc").fadeOut("fast");
}); 
$("td.with-tooltip").mousemove(function(e){
    $(".desc")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         


												

Answer 1

Works fine for me :\ : http://www.jsfiddle.net/DkW6m/1

What browser / jQuery version you using?

You can hide the problem by calling stop() before applying the fadeIn/ fadeOut effects.

$(".desc").stop().fadeOut();

etc…