Question

我正在使用jquery-ui（1.10.2）工具提示小部件，我遇到了一个恼人的错误。工具提示将不会在第一次鼠标悬停时显示。我在鼠标移动和重新鼠标悬停时以及之后的每次操作时都会这样做。不是第一次。这是我的代码：

HTML：

<img src="btn-tooltip-info.png" class="tooltip" title="Your text here"/>

的javascript：

$(document).ready( function() {

    $(document).on("mouseover", ".tooltip", function(e){
        $(this).tooltip({
            content: function() {
                return $(this).attr('title');
            },
            position: { my: "left+15 center", at: "right center" }
        });
    });
});

我正在使用on（），因为其他进程可能会在初始加载后动态更改html。我在这里不知所措，任何见解将不胜感激。提前感谢您的帮助。

Answer 1

这是因为tooltip是在鼠标悬停时触发的，但是当第一次鼠标悬停发生时，没有与该元素关联的工具提示窗口小部件。

您可以在此方案中使用的hack是检查是否为元素初始化窗口小部件，如果没有初始化窗口小部件，然后再次手动触发mouseover事件

$(document).ready( function() {

    $(document).on("mouseover", ".tooltip", function(e){
        if(!$(this).data('tooltip')){
            $(this).tooltip({
                content: function() {
                    return $(this).attr('title');
                },
                position: { my: "left+15 center", at: "right center" }
            }).triggerHandler('mouseover');
        }
    });
});

演示：Fiddle

正如@roasted建议您可以使用open方法而不是触发mouseover。

而不是.triggerHandler('mouseover');使用tooltip('open');

工具提示未在第一次鼠标悬停时显示

1 个答案: