javascript - 单击目标 ="_blank"链接时隐藏 jQueryUI 工具提示

Question

我使用 jQuery 在页面上每个具有“详细信息”属性的链接上显示工具提示

        $(function() {
            $tooltip = $(document).tooltip({
                show: false,
                track: true,
                items: "a[data-details]",
                content: function() {
                    return $( this ).data('details');
                }
            });
        });

这非常有效。但是，当用户单击这些链接之一时，该 URL 将在新选项卡中打开(使用 target="_blank")。问题在于，当用户返回第一个选项卡时，工具提示仍然打开。

这是我迄今为止尝试过的:

$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
    $(document).tooltip("close");                               // Doesn't work at all
    $('div[class^="ui-tooltip"]').remove();                     // removes the tooltip onclick, but gets it back opened when returning on the tab
});

有没有办法在打开新页面时保持工具提示关闭？

感谢您的帮助。

这是一个说明问题的 fiddle :https://jsfiddle.net/su4v757a/

注意:我使用的是 jQuery 1.12.4 和 jQueryUI 1.12.1

Answer 1

这可能是一个错误。

据我所知，这一定是一个错误。 您可以通过 https://bugs.jqueryui.com/report/10?P=tooltip 让他们知道

我注意到 .tooltip("close") 在 fiddle 中不起作用。然而，工具提示会监听“mouseleave”事件以关闭，我们可以通过 $('a[data-details]').trigger("mouseleave"); 强制关闭

如果你尝试一下，你会发现它确实关闭了，但又弹出了:

$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
    $(this).trigger("mouseleave");
  });

将鼠标悬停并单击“我”:

返回页面，注意工具提示已关闭并再次返回:

解决方法 - 可能的解决方案

由于 .hide() - 元素会触发“mouseleave”事件，因此您可以做一些有趣的事情，例如在单击时隐藏链接，然后稍后显示它。

  $('a[data-details]').click(function() {
    var $this = $(this);
    $this.hide(); 
    setTimeout(function() {
      $this.show()
    }, 1);
  });

将超时设置为 1 毫秒不会造成链接任何闪烁，从而使用户察觉不到隐藏/显示。

适用于 Chrome。在这里试试:https://jsfiddle.net/cyx6528e/1/ 祝你好运!