Événement jQuery "en boucle

Question

J'essaie de coder une infobulle (Oui je sais, j'ai mes raisons d'éviter les plugins dans ce cas) en jQuery.

Lorsque j'affiche l'infobulle et que je laisse la souris au même endroit, l'affichage et le masquage se répètent indéfiniment. C'est comme si l'élément déclenchait l'événement de survol encore et encore et encore.

J'ai essayé de délier l'événement mais cela ne fonctionne pas non plus.

$("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();

});

Qu'est-ce que je peux faire ?

Merci.

J'ai résolu le problème avec ce code, merci à tous, vraiment.

    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

Essayez soit .hover() o .mouseenter() con mouseleave() .

Mise à jour : ce qui précède ne sera d'aucune utilité si c'est le bloc à positionnement absolu qui masque la souris.

Que dites-vous de ça ?

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

La cellule de tableau positionnée de manière relative n'est peut-être pas officiellement prise en charge, mais si je me souviens bien, si la cellule de tableau est positionnée de manière relative, il est possible de l'utiliser. mai fonctionnent comme prévu dans la plupart ( ?) des navigateurs.

Answer 2

Ça marche bien pour moi :\ : http://www.jsfiddle.net/DkW6m/1

Quel navigateur / version de jQuery utilisez-vous ?

Vous pouvez masquer le problème en appelant stop() avant d'appliquer les effets de fadeIn/ fadeOut.

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

etc...

Answer 3

Pour moi, il semble que le div soit positionné au-dessus de la cellule de votre tableau, essayez donc ceci :

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