qTip（jQuery 插件）如何删除页面中的所有 qtip？答案

【问题标题】：qTip (jQuery plug-in) how can I remove all qtips in my page?qTip（jQuery 插件）如何删除页面中的所有 qtip？
【发布时间】：2011-02-13 05:24:38
【问题描述】：

我正在使用 jquery-plugin qTip。销毁页面中所有工具提示的命令是什么？

我试过了：

$('.option img[title], span.taxonomy-image-link-alter img[title]').qtip("destroy");

但它没有工作...... 谢谢

【问题讨论】：

标签： javascript jquery jquery-plugins qtip

【解决方案1】：

我已经用$(".qtip").remove();解决了

【讨论】：

通过此选择器移除不会清除任何绑定到目标元素的资源。
Qtip2 默认也使用“延迟加载”，因此在第一次出现之前不会创建工具提示

【解决方案2】：

qTip2 是该脚本的较新版本，但我只想指出一件事。

$(".qtip").remove();

这段代码并没有破坏所有的工具提示——它只是删除了它们的容器。附加到调用工具提示的对象的所有处理程序和事件在浏览器的内存中仍然可用。

在 qTip 中要完全删除工具提示及其处理程序，您必须使用：

$(mytooltip).qtip("destroy");

或

$(mytooltip).qtip('api').destroy();

但是在 qTip2 中使用这个：

$(mytooltip).remove();

会自动调用 api 并完全销毁工具提示及其处理程序。

【讨论】：

+1 移除容器也会破坏内部的所有元素，而不仅仅是悬停工具提示。

【解决方案3】：

$('.qtip').each(function(){
  $(this).data('qtip').destroy();
})

【讨论】：

如果你不能得到元素选择器就好了。
这似乎是最明智的解决方案。
这对我在 COVID-19 危机期间编码时有用。

【解决方案4】：

qtip("destroy") 有问题（2.1.1 版），无法清除所有内容。

我发现这是一个合适的解决方法：

// don't call destroy if not needed
if (element.data("qtip")) {
    // the 'true' makes the difference
    element.qtip("destroy",true);
    // extra cleanup
    element.removeData("hasqtip");
    element.removeAttr("data-hasqtip");
}

【讨论】：

非常感谢！我似乎在 2.1.1 中遇到了同样的问题，这个解决方法对我有用。
不得不使用 jQuery 选择器代替 element ($(.selector)._____) 但这很有效

【解决方案5】：

看起来有问题。我对此有一些运气，但它不会恢复原始标题。我怀疑destroy 也没有这样做......

$('span.taxonomy-image-link-alter img')
    .filter(function(){return $(this).data('qtip');})
    .qtip('destroy');

您似乎无法在没有 qTip 的元素上调用 destroy - 它不会静默失败，但会引发异常并停止循环。

【讨论】：

我已经这样解决了：$(".qtip").remove();我删除了页面底部 qTip 添加的所有元素
@Patrick - 这听起来更好，尽管它可能会留下一些数据和事件处理程序。不过我的版本也好不到哪里去……您应该添加另一个答案并接受它。

【解决方案6】：

我体验过 api-call

$(selector).qtip('destroy')

不会可靠地删除所有 qtip 数据，尤其是在同时使用多个 qtip 时。

在我的情况下，我必须删除 visible qtip 并成功使用此解决方法：

$(selector).removeData('qtip');
$('.qtip :visible').remove();

【讨论】：

【解决方案7】：

怎么样：

$('[data-hasqtip]').qtip('destroy', true);

似乎正在使用qTip2 版本3.0.2。

【讨论】：

【解决方案8】：

   if ( jQuery( '.qtip' ).length > 0 )
    {
        jQuery( "#IdElement").qtip("destroy");
    }

【讨论】：

【解决方案9】：

这些答案都没有帮助我。

在我的例子中，我在一个带有关闭按钮的元素上有一个 qtip。关闭按钮移除了元素，所以移除元素后就没有移除qtip的参考点了。

我认为$('.qtip:visible').remove() 会起作用，但它以某种方式删除了页面上的所有 qtip，而不是我想要删除的单个。

我注意到可见的 qtip 被赋予了一个类 qtip-active，所以对我有用的是：

$('.qtip-active').remove();

【讨论】：

【解决方案10】：

可能有点晚了，但是当 ajax 调用替换页面中的内容时，我遇到了内存和页面加载问题，在销毁它们之前删除了目标 qtip2 对象，因此即使目标已经消失，一些元素仍然存在。

基于有时你想清理所有qtips2元素和数据的事实，无论原始对象是否存在，一些tooltip元素都保留在body上，所以当原始目标已经消失时，没有简单的方法可以调用destroy() 方法。

除非您搜索创建的对象而不是目标。

jQuery('div[id^="qtip-"]').each(function(){ //search for remaining objects

    _qtip2 = jQuery(this).data("qtip"); //access the data where destroy() exist.

    //if it's a proper qtip2 object then call the destroy method.
    if(_qtip2 != undefined){ 
        // the "true" is for immediate destroy
        _qtip2.destroy(true);
    }
    //if everything went right the data and the remaining objects in the body must be gone.
});

我使用 JQuery 来解决无冲突问题，但您可以使用“$”（符号）代替 JQuery

【讨论】：