jQuery event "looping"

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, r开发者_如何学运维eally.

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

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...

To me it sounds like the div is being positioned over your table cell, so try this:

$("td.with-tooltip, .desc").mouseover( function() {
 // don't change this code
})

Try either .hover() or .mouseenter() with mouseleave().

Update: above won't help if it's the absolute positioned block masking the mouse.

How about this:

td.with-tooltip { position: relative }

$('td.with-tooltip').hover(function() {
    if ($('.tooltip', this).length == 0)
        $('<div class="tooltip" />').text('')
            .css('position', 'absolute')
            .appendTo($this);
    $('.tooltip', this).show();
}, function() {
    $('.tooltip', this).hide();
});

Relatively positioned table-cell may not be officially supported, but if I remember correcly, if may work as expected in most(?) browsers.