1

I have the following problem with jQuery (1.10.3) tooltip plugin.

I have several links like

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

and jquery code: 

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

The problem is that when I click the link, tooltip appears without any problem and new tab with link's URLopens, but when I return to the first page tooltip appears again. I have to click somewhere in page to close it.

Maybe there is a way to close all tooltips on window focus automatically ?

4

2 回答 2

4

最后我找到了解决方案。导致的问题是因为我返回页面焦点在工具提示锚点上并没有自动删除，所以工具提示再次执行。此代码从所有标签中删除焦点并且工作正常：

$(window).focus(function() {
$('a').focus(function() {
    this.blur();
});

});
于 2013-10-10T08:25:35.297 回答
0

第一的：

我发现，如果你在内容函数中返回一个空值，工具提示将不会显示。

第二点：

您可以使用以下方法在 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 回答