Question

我试图在jQuery中编写一个工具提示（是的，我知道，我有理由在这种情况下避免使用插件）。

当我显示工具提示并将鼠标放在同一个地方时，显示和隐藏会永远重复。就像元素一次又一次地触发悬停事件一样。

我尝试解除绑定事件，但它既不起作用。

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

});

我该怎么办？

感谢。

我解决了这段代码，非常感谢大家。

    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

使用.hover()尝试.mouseenter()或mouseleave()。

更新：如果它是屏蔽鼠标的绝对定位块，则上述将无济于事。

这个怎么样：

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

可能无法正式支持相对定位的表格单元格，但如果我记得错误，那么可能在大多数（？）浏览器中按预期工作。

Answer 2

对我来说很好：\ http://www.jsfiddle.net/DkW6m/1

您使用的是哪种浏览器/ jQuery版本？

您可以在应用fadeIn / fadeOut效果之前调用stop()来隐藏问题。

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

等...

Answer 3

对我而言，听起来div正在你的桌子上定位，所以试试这个：

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

jQuery事件“循环”

3 个答案: