表格单元格上的 jQuery 工具提示

Question

我正在尝试使用 jQuery 在表格单元格上创建简单的工具提示。
我写了这段代码：

<script type="text/javascript">
        $(function () {

            $(".test").bind("mouseenter", function (e) {
                $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
                $("#ToolTipDIv").show("slow");
            });
            $(".test").bind("mouseleave", function (e) {
                $("#ToolTipDIv").hide("slow");
            });
        }); 

    </script>
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;">
        This is a text
    </div>
    <table class="style1" border="1">
        <tr>
            <td class="test">
                1
            </td>
            <td class="test">
                6
            </td>
        </tr>
        <tr>
            <td class="test">
                2
            </td>
            <td class="test">
                7
            </td>
        </tr>
        </table>

但它没有按预期工作。当我将鼠标悬停在单元格上时 Tooltip Div 关闭并打开了几次。
例如，我想查看第三个单元格的工具提示我将鼠标指针放在第一个和第二个单元格上以到达第三个单元格。jQuery 工具提示将显示和隐藏 3 次。
jsfiddle link

Answer 1

这是因为当您的新 div 弹出并且您的鼠标“进入”该新 div 时，您不再悬停在旧位置。我的建议首先是使用jquery的hover而不是专门说明mouseenter等......然后看看插件hoverintent。但要解决您的问题，您需要将弹出 div 的位置设置为绝对位置。

Answer 2

我的建议是工具提示可以快速出现但又可以快速消失（对用户的干扰较小）。所以你的代码是：

$(function () {
    $(".test").bind("mouseenter", function (e) {
        $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
        $("#ToolTipDIv").show('normal');
    });
    $(".test").bind("mouseleave", function (e) {
        $("#ToolTipDIv").hide(); //Note I removed 'slow'
    });
}); 

并且，将position: absolute; 样式添加到您的工具提示元素。

我已经更新了你的小提琴：http://jsfiddle.net/DmnMQ/3/，它运行正常。

希望这会有所帮助。干杯

Answer 3

为什么不使用下面链接中的tiptip jquery 插件，因为它更简单。

http://code.drewwilson.com/entry/tiptip-jquery-plugin

您可以像这样将您的代码包装在一个跨度内，让插件处理其余的事情。重新发明轮子没有意义。

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>