Question

我有一张表，其中一些相邻的单元格具有相同的类（someClass）。当鼠标悬停其中一个单元格时，我想显示工具提示。以下是我实现此方法的方法：

/* HTML code */

<div id="tooltip"><div>

/* CSS code */

#tooltip {
    display: none;
    position: absolute;
    border: 1px solid #333;
    background: #f7f5d1;
    padding: 2px 5px;
    color: #333;
    font-size: 20px;
}

/* jQuery code */

$(".someClass").hover(function(e) {
                         $("#tooltip").html("Shalom")
                                      .css("top",  (e.pageY - 10) + "px")
                                      .css("left", (e.pageX + 20) + "px")
                                      .fadeIn("fast");      
                      },
                      function() {
                         $("#tooltip").html("").hide();
                      });

$(".someClass").mousemove(function(e) {
                             $("#tooltip").css("top",  (e.pageY - 10) + "px")
                                          .css("left", (e.pageX + 20) + "px");
                          });

问题是当鼠标离开单元格并进入相邻单元格时，工具提示会消失并再次出现，这看起来不太好。

如何防止工具提示消失并再次出现？

谢谢！

Answer 1

未经测试的代码被剪切，需要通过#tooltip_id识别工具提示

var some_object = { 
    about_to_be_closed: false,
    close_unless_needed: function() {
        if (some_object.about_to_be_closed) {
            $(some_object.about_to_be_closed).fadeOut();
        }
    }
};


// code to be executed on close 
some_object.about_to_be_closed = tooltip_id;
window.setTimeout(close_unless_needed, 100)


// code to be executed on open
if (some_object.about_to_be_closed == tooltip_id) {
    some_object.about_to_be_closed = false;
}

这不是一个真正可靠的解决方案，但我可以工作。

jQuery的工具提示问题

1 个答案: