6

我为页面中的所有元素激活了 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 调用。

4

8 回答 8

9

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

 $(".ui-tooltip-content").parents('div').remove();
于 2013-10-09T08:55:45.637 回答
3

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

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

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

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

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

希望这有助于和其他人！

于 2018-05-04T08:19:51.193 回答
1

确保您包含正确的 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;

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

于 2019-11-13T06:00:52.107 回答
0

尝试这个：

onclick=" $('.tooltip').remove();"
// on parent click
于 2014-10-11T14:14:35.343 回答
0

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

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

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

于 2014-11-18T09:28:20.110 回答
0

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

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

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

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

于 2019-09-12T11:10:55.803 回答
0

在我的情况下，按钮打开对话框，然后通过 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>
于 2019-12-27T09:44:18.000 回答
0

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

elem.tooltip('disable');

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

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

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

于 2020-08-16T01:42:31.710 回答