jQuery的工具提示问题答案

【问题标题】：Tooltip problem with jQueryjQuery的工具提示问题
【发布时间】：2010-05-04 16:18:05
【问题描述】：

我有一个表格，其中一些相邻的单元格具有相同的类 (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");
                          });

问题是当鼠标离开一个单元格进入相邻的单元格时，提示框消失又出现，看起来不太好看。

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

谢谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案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;
}

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

【讨论】：