jQuery event "looping"

Answer 1

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.

Answer 2

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

Answer 3

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