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 link

Answer 1

那是因为当你的新div弹出并且你的鼠标在“新”中时，你不再在旧位置上徘徊。我的建议首先是使用jquery的悬停而不是专门说明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>

表单元格上的jQuery工具提示

3 个答案: