5

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:

$(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" }
        });
    });
});

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.

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メソッドを使用できますmouseover。

.triggerHandler('mouseover');使用する代わりにtooltip('open');

于 2013-06-07T10:02:46.493 に答える