表单元格上的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关闭并打开了好几次.
例如,我想查看第三个Cell的工具提示我将鼠标指针放在第一个和第二个单元格上以到达第三个单元格.jQuery工具提示将显示并隐藏3次.
jsfiddle链接

Answer 1

那是因为当你的新div弹出并且你的鼠标在"新"中时,你不再在旧位置上徘徊.我的建议首先是使用jquery的悬停而不是专门说明mouseenter等...然后查看插件hoverintent.但为了解决您的问题,您需要将弹出div的位置设置为绝对.