1

jQuery (1.10.3) ツールチップ プラグインに次の問題があります。

私はいくつかのリンクを持っています

<a target="_blank" class="tooltip_top_studios">Link1</a>

およびjqueryコード:

$(".tooltip_top_studios").tooltip({
    tooltipClass:'ui-tooltip',
    position: { my: "left+15 top", at: "right center" },
    show: { effect: "fadeIn", delay: 300},

    content: function() {
       var img_src = $(this).attr('rel');
       var html =  "<h1 style='color:#d4dce8;margin-bottom:7px;'>" 
          + $(this).attr('title') + "</h1>" + "<span style='font-weight:bold;font-size:10px;margin-bottom:7px;padding:0;display:block;'>"  
          + $(this).attr('name') + "</span><img width=280 src='" + img_src + "' /> ";

        return html;
     },
});

問題は、リンクをクリックするとツールチップが問題なく表示され、リンクの URL を含む新しいタブが開くのですが、最初のページに戻るとツールチップが再び表示されることです。ページを閉じるには、ページのどこかをクリックする必要があります。

おそらく、ウィンドウのフォーカス時にすべてのツールチップを自動的に閉じる方法はありますか?

4

2 に答える 2

0

初め：

content 関数に null 値を返すと、ツールチップが表示されないことがわかりました。

2 番目のポイント:

以下を使用して、html ドキュメント内の要素を見つけることができます。

 document.elementsFromPoint

また、コンテンツ関数のコンテキストで発生したイベントにアクセスできます。

次に、回避策は次のようなものです。

$( "body" ).tooltip({
        items: "[data-title]",
        content: function() {                
            if (document.elementsFromPoint(event.pageX,event.pageY).indexOf(this) === -1)
                return null;
            var title = $(this).data("title");                
            return title;
        },
        hide: {
            effect: "fadeOut"
        }
    });
于 2015-10-28T09:47:14.500 に答える