工具提示没有消失答案

【问题标题】：Tooltip not disappearing工具提示没有消失
【发布时间】：2020-08-16 09:42:31
【问题描述】：

我为页面中的所有元素激活了 jQuery 工具提示。其中一个元素是 AJAX“提交”按钮，该按钮立即禁用（单击时）然后消失（包含它的 div 被 AJAX 响应覆盖）

我的问题是，即使单击按钮/消失后，工具提示仍会继续保留在屏幕上。已经尝试过这些代码，但没有用（不是全部一起，而是任何一个）：

$("#signup").tooltip({events: {input: 'click, blur'}});
$("#signup").tooltip("disable"); 
$("#signup").tooltip().hide(300);
$("#signup").tooltip("close");

紧随其后

document.getElementById('signup').disabled=true;

然后是 Ajax 调用。

【问题讨论】：

这有效：$(".ui-tooltip-content").parents('div').remove();无需禁用/重新启用工具提示。将其添加为答案，以防万一有人遇到类似问题。（费了好大劲才找到这个金块！）

标签： jquery jquery-ui-tooltip

【解决方案1】：

您可以使用remove() 删除工具提示

 $(".ui-tooltip-content").parents('div').remove();

【讨论】：

当我给出工具提示（“禁用”）时，我得到这个错误：在初始化之前无法调用工具提示上的方法...
我已经添加你的答案来帮助其他有同样问题的人

【解决方案2】：

我知道这是一个老问题，但我遇到了同样的问题，我删除了元素但工具提示没有消失，所以我使用以下方法来解决它。

假设您使用它来启动工具提示：

$('document').tooltip({
    position: {
        my: "center bottom-15",
        at: "center bottom"
    }
});

以下内容会在单击 DOM 后删除工具提示。

$( document ).click(function() {
   $('.ui-tooltip').remove();
});

希望这个帮助和其他人！

【讨论】：

【解决方案3】：

确保您包含正确的 jquery ui css，其中包括：

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
}
body .ui-tooltip {
    border-width: 2px;
}

对于 jQuery UI - v1.12.1 - 2016-12-05。由于工具提示的选项为“真”，我更改了第 721 行：

    options.complete = callback;    
to
    if (typeof options === 'object') options.complete = callback;

此更改后，工具提示正确关闭。

【讨论】：

【解决方案4】：

试试这个：

onclick=" $('.tooltip').remove();"
// on parent click

【讨论】：

【解决方案5】：

我也有类似的问题。对我有用的决定是：

$(document).on('click', '.export',function(){ $('.tooltip:last').remove(); });

我使用选择器“文档”，因为我的链接是动态创建的。链接有 class="export" 希望这对其他人有所帮助。

【讨论】：

【解决方案6】：

2019 年 9 月：我已经尝试了其中一些答案，但无论出于何种原因，它们在 iOS (iPhone XS) 上都无法正常工作。由于这是关于此问题的 Google 搜索的最高结果（仍然是一个问题），我发现以下是有效的：

为元素或其任何祖先添加一个虚拟的onclick="void(0)" 属性，直到但不包括。

因此，如果您将内容包装在 <div> 或 <main>/<section> 等标签中，请将 onclick 事件添加到其中，然后您可以单击工具提示弹出窗口之外的文档以关闭它，并且您不必依赖像 jQuery 这样的附加库。

【讨论】：

【解决方案7】：

在我的情况下，按钮打开对话框，然后通过 axios / ajax 向服务器请求，然后在对话框关闭后工具提示仍然显示。所以，我的问题的解决方案是在绑定到 DOM 时设置一个触发事件。这是示例解决方案

    jQuery(function($){
        $('[data-tooltip="tooltip"]').tooltip({
            trigger : 'hover'
        });
    });

HTML 代码

<a href="#!" class="table-action table-action-delete" data-toggle="modal" data-target="#admin-info{{ $key }}" data-tooltip="tooltip" title="More Detail">  
    <i class="fa fa-folder"></i> 
</a>

【讨论】：

【解决方案8】：

2020 年 8 月：一种更简洁、更有针对性的使用方式现在似乎奏效了。

elem.tooltip('disable');

只要确保在禁用元素之前执行。如果您无权访问禁用按钮的代码，则可以存储 onclick 值并预先添加工具提示禁用行。

let submit = document.getElementById('submit');
let submitOnclick = submit.onclick;
submit.onclick = () => {
    submit.tooltip('disable');
    submitOnclick();
};

当然，您可以向该匿名函数添加参数，并在需要时将它们作为参数传递给存储的 onclick。附言确保这段代码只运行一次，否则修改后的onclick会逐渐变大:)

【讨论】：