5

我正在使用 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。我在这里不知所措，任何见解将不胜感激。提前感谢您的帮助。

4

1 回答 1

12

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

您可以在这种情况下使用的一个技巧是检查小部件是否为元素初始化，如果没有初始化小部件，然后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');
        }
    });
});

演示：小提琴

正如@roasted 建议的那样，您可以使用open方法而不是 triggering mouseover。

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

于 2013-06-07T10:02:46.493 回答