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

Question

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

I tried:

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

But it didn't work... Thanks

Crew

Answer 1

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

Crew

Removing through this selector does not clear any resources binded to the target element. – Usher

Qtip2 also uses 'lazy-loading' by default so tooltips won't be created until first apperance – Sensitivity

Answer 2

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

$(".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:

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

or

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

In qTip2 however using this:

$(mytooltip).remove();

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

Standish

+1 removing the containers also destroys any elements inside, not just the hover tooltip. – Crossbreed

Answer 3

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

Bezant

Good if you can't get the element selector. – Corny

This seems like the most sensible solution. – Mf

This worked for me while coding during COVID-19 crisis. – Somehow

Answer 4

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

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

Tense

Much appreciated! I seem to have the same issue in 2.1.1, and this workaround does the trick for me. – Ashurbanipal

had to use a jQuery selector in place of element ($(.selector)._____) but this worked perfectly – Jumna

Answer 5

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

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

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

Tbilisi

i've solved in this way: $(".qtip").remove(); I remove all elements added by qTip on the bottom of the page – Crew

@Patrick - that sound better, although it might leave behind some data and event handlers. My version isn't any better though... You should add another answer and accept it. – Tbilisi

Answer 6

I experienced that the api-call

$(selector).qtip('destroy')

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

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

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

Naif

Answer 7

What about:

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

Seems to be working with qTip2 version 3.0.2.

Metaphysics

Answer 8

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

Speciality

Answer 9

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.

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.

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

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

Declassify

Answer 10

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.

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.

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

Chaunce