Question

我使用jQuery在我页面上的每个链接上显示工具提示，其中包含详细信息＆＃39;属性

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

这非常有效。但是，当用户单击其中一个链接时，URL将在新选项卡中打开（使用target =＆＃34; _blank＆＃34;）。问题是，当用户返回第一个选项卡时，工具提示仍处于打开状态。

这是我到目前为止所尝试的内容：

$('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() - 一个元素会触发“mouseleave” - 事件，你可以做一些时髦的事情，比如在点击时隐藏链接，并在片刻之后显示它。

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

将超时设置为1 ms不会产生链接的任何闪烁，使得隐藏/显示对用户来说不明显。

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

Answer 2

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

单击target =＆＃34; _blank＆＃34;时隐藏jQueryUI工具提示链接

2 个答案:

这可能是一个错误。

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