jquery - 第一次鼠标悬停时不显示工具提示

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

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

在这种情况下，您可以使用的一个技巧是检查该元素是否已初始化小部件，如果没有初始化小部件，然后再次手动触发 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方法而不是触发鼠标悬停。

使用tooltip('open');代替.triggerHandler('mouseover');