Question

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

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

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

接着是

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

然后是Ajax调用。

请帮忙！

Answer 1

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

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

Answer 2

试试这个：

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

Answer 3

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

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

我用于选择器“document”，因为我的链接是动态创建的。链接有class =“export” 希望这个帮助和其他人。

Answer 4

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

我们假设你用它来启动工具提示：

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

以下内容从DOM中单击后删除工具提示。

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

希望这个帮助和其他人一起！

Answer 5

2019年9月：我已经尝试了其中一些答案，无论出于何种原因，它们都无法在iOS（iPhone XS）上正常运行。由于这是针对该问题（仍然是的问题）的Google搜索的最高结果，因此，我发现这是可行的：

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

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

来源/更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile

Answer 6

确保您包括的正确的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。由于工具提示的选项为“ true”，因此我更改了第721行：

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

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

Answer 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>

Answer 8

2020年8月：一种干净，更合理的方式使用此功能似乎可行。

elem.tooltip('disable');

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

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

自然地，您可以向该匿名函数添加参数，并将它们作为参数传递给存储的onclick（如果需要）。附言确保此代码仅运行一次，否则修改后的onclick会逐渐变大：）

jquery工具提示没有消失

8 个答案: