单击 target="_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
});

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

感谢您的帮助。

这是一个说明问题的小提琴：https://jsfiddle.net/su4v757a/

注意：我将 jQuery 1.12.4 与 jQueryUI 1.12.1 一起使用

Answer 1

这可能是一个错误。

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

让他们知道

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

如果你试试这个，你会看到它确实关闭了，但又弹出了：

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

悬停并点击“我”：

返回页面时，提示工具提示已关闭并再次返回：

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

由于.hide()-ing 元素触发了“mouseleave”事件，您可以做一些时髦的事情，比如在点击时隐藏链接，稍后再显示。

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

将超时设置为 1 毫秒不会导致链接闪烁，从而使用户无法注意到隐藏/显示。

在 Chrome 中工作。在这里试试：https://jsfiddle.net/cyx6528e/1/ 祝你好运！

Answer 2

工具提示通常适用于悬停功能，您可以为您的问题提供 js fiddle