Javascript qTip(jQuery 插件)如何删除页面中的所有 qtip?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2727504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 01:40:15  来源:igfitidea点击:

qTip (jQuery plug-in) how can I remove all qtips in my page?

javascriptjqueryjquery-pluginsqtip

提问by aneuryzm

I'm using the jquery-plugin qTip. What's the command to destroy all tooltips in my page ?

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

I tried:

我试过:

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

But it didn't work... Thanks

但它没有用...谢谢

回答by aneuryzm

I've solved with $(".qtip").remove();

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

回答by biphobe

qTip2 is newer version of this script, but I would just like to point out 1 thing.

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

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

This piece of code didn't destroy all the tooltips - it simply removed their containers. All the handlers and events attached to objects which invoked the tooltips are still avaiable in browser's memory.

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

In qTip to delete the tooltip and it's handler scompletely you would have to use:

在 qTip 中删除工具提示和它的处理程序完全你必须使用:

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

or

或者

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

In qTip2 however using this:

然而在 qTip2 中使用这个:

$(mytooltip).remove();

Would automaticaly call out the api and destroy tooltip and it's handlers completely.

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

回答by Stewie

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

回答by gamliela

qtip("destroy")is buggy (version 2.1.1) and doesn't clear everything.

qtip("destroy")有问题(版本 2.1.1)并且不能清除所有内容。

I found this as a proper workaround:

我发现这是一个适当的解决方法:

// 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");
}

回答by Kobi

Looks buggy. I've had some luck with this, but it does not restore the original titles. I suspect destroydoesn't do that either...

看起来马车。我在这方面有一些运气,但它并没有恢复原始标题。我怀疑destroy也不这样做......

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

It seems you cannot call destroyon elements without qTip - it doesn't fail silently, but throws an exception and stops the loop.

似乎你不能destroy在没有 qTip 的情况下调用元素 - 它不会静默失败,但会引发异常并停止循环。

回答by Martin Pabst

I experienced that the api-call

我经历过 api 调用

$(selector).qtip('destroy')

doesn't remove all qtip-data dependably, especially when using several qtips simultaneously.

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

In my case I had to remove a visibleqtip and successfully used this workaround:

就我而言,我必须删除可见的qtip 并成功使用此解决方法:

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

回答by bozdoz

None of these answers helped me.

这些答案都没有帮助我。

In my case, I had a qtip on an element with a close button. The close button removed the element, so there was no reference point to remove the qtip after the element was removed.

就我而言,我在一个带有关闭按钮的元素上有一个 qtip。关闭按钮移除了元素,所以移除元素后没有参考点移除qtip。

I thought $('.qtip:visible').remove()would work, but it somehow removed all of the qtips on the page, and not the single one that I wanted removed.

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

I noticed that the visible qtip is given a class qtip-active, so what worked for me was:

我注意到可见的 qtip 被赋予了一个 class qtip-active,所以对我有用的是:

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

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

回答by Tefiniaina Lovasoa

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

回答by MiKE Zamora

It may be a little late, but I had issues with memory and page load when an ajax call replace the content in the page, deleting the target qtip2 objects before destroy them, so some elements remains even if the target had gone.

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

Based on the fact that sometimes you want to clean all qtips2 elements and data, no matter if the original object exist or not, some tooltip elements remains on the body, so when the original target has gone there is no easy way to call the destroy() method.

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

Unless you do it searching for the created objects instead of the targets.

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

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.
});

I used JQuery for a no conflict issue, but you can use "$" (symbol) instead of JQuery

我使用 JQuery 解决了无冲突问题,但您可以使用“$”(符号)代替 JQuery

回答by userlond

What about:

关于什么:

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

Seems to be working with qTip2version 3.0.2.

似乎正在使用qTip2version 3.0.2