Question

我在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打开，但当我返回第一页时，工具提示再次出现。我必须单击页面中的某个位置才能将其关闭。

也许有办法自动关闭窗口焦点上的所有工具提示？

Answer 1

最后我找到了解决方案。引起的问题是因为我在页面上重点关注工具提示锚点并未自动删除，因此工具提示再次执行。此代码从所有标签中删除焦点并正常工作：

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

});

Answer 2

首先：

我发现，如果在内容函数中返回null值，则不会显示工具提示。

第二点：

您可以使用以下命令在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"
        }
    });

jQuery工具提示重新打开窗口焦点

2 个答案: