Tooltip not disappearing

Question

I have jQuery tooltip activated for all elements in my page. One of those elements is an AJAX 'Submit' button that is immediately disabled (on click) and then vanishes (the div containing it is overwritten by the AJAX response)

My problem is that the tooltip continues to remain on screen even after the button is clicked/vanishes. Have tried these codes, but to no use (no all together, but any one):

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

Followed by

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

And then the Ajax call.

Bonnybonnyclabber

This worked: $(".ui-tooltip-content").parents('div').remove(); without having to disable/re-enable tooltips. Adding it as an answer just in case someone had a similar problem. (Went to a lot of trouble to find this nugget!) – Bonnybonnyclabber

Answer 1

You can use remove() to remove the tooltip

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

Rehnberg

When I give tooltip("disable"), I get this error: cannot call methods on tooltip prior to initialization... – Bonnybonnyclabber

I have add your answer to help other who have the same problem – Rehnberg

Answer 2

I know it's an old question but I ran into the same problem where i delete the element but the tooltip does not disappear so i used the following way to solve it.

Let's say you used this to initiate the tooltips:

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

The following removes the tooltip after a click from the DOM.

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

Hope this help and other people!

Magnific

Answer 3

Make sure you are including the correct jquery ui css that includes:

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
}
body .ui-tooltip {
    border-width: 2px;
}

For jQuery UI - v1.12.1 - 2016-12-05. Since options is "true" for tooltips, I changed line 721:

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

After this change, tooltips closed correctly.

Eskew

Answer 4

Try this:

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

Detour

Answer 5

I have the similar problem. The decision which work for me is:

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

I use for selector "document" because my links are dynamicly created. The links have class="export" Hope this help and other people.

Dannielledannon

Answer 6

Sept 2019: I've tried a few of these answers and they don't work as expected on iOS (iPhone XS) for whatever reason. Since this is the top result for a Google search on this issue (which is still an issue), here's what I found works:

Add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including .

So if you wrap your content in a <div> or a <main>/<section> etc tag, add the onclick event to that and then you can click on document outside of the tooltip popup to close it, and you don't have to rely on addition libraries like jQuery.

Source/more info: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile

Pterodactyl

Answer 7

In my case, The button open the Dialog and then request to Server by axios / ajax then after dialog close the tooltip still show. So, the solution for my problem is to set a trigger event when binding to DOM. here are the sample solution

    jQuery(function($){
        $('[data-tooltip="tooltip"]').tooltip({
            trigger : 'hover'
        });
    });

HTML Code

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

Chibchan

Answer 8

August 2020: A clean, more intended way to use this now seems to work.

elem.tooltip('disable');

Just make sure you execute that before disabling the element. If you don't have access to the code that disables the button, you can store the onclick value and prepend the tooltip disable line.

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

Naturally, you can add parameters to that anonymous function and pass them as arguments to the stored onclick if needed. P.S. Ensure this code only runs once, or the modified onclick will gradually get bigger and bigger :)

Afforest