工具提示在第一次鼠标悬停时不显示 [英] tooltip not showing on first mouseover

问题描述

我正在使用jquery-ui的(1.10.2)工具提示小部件，并且遇到了令人讨厌的错误. 工具提示不会在第一个鼠标悬停时显示.当我将鼠标移出并重新鼠标悬停时，以及之后的每次都如此.但这不是第一次.这是我的代码:

I am using jquery-ui's (1.10.2) tooltip widget and I am experiencing an annoying error. The tooltip won't show on the first mouseover. It does when I mouseout and re-mouseover and everytime after that. Just not the first time. This is my code:

HTML:

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

javascript:

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. 我在这里不知所措，任何见解将不胜感激. 预先感谢您的帮助.

I'm using on() because other processes might dynamically change the html after initial load. I'm at a loss here, any insights would be greatly appreciated. Thanks in advance for any help.

推荐答案

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

It is because the tooltip is triggered on mouseover but when the first mouseover happens there is no tooltip widget associated with the element.

在这种情况下，您可以使用的一种方法是检查是否已针对元素初始化窗口小部件，如果未初始化该窗口小部件，然后再次手动触发mouseover事件

A hack you can use in this scenario is to check if the widget is initialized for the element, if not initialize the widget and then manually trigger the mouseover event again

$(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 方法，而不是触发mouseover.

As @roasted suggested you can use the open method instead of triggering mouseover.

使用tooltip('open');

这篇关于工具提示在第一次鼠标悬停时不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！