Jquery tooltip is not disappearing on click of item

Question

I am using jquery-1.9.1.js and UI jquery-ui-1.10.3.custom.min.js. When I mouse over on any form element it shows tooltip and disappear on mouse out. but I want to vanish that toolip on click event of that item, because in my current scenario it shows tooltip for button and it persist even after button click. hence it see multiple tooltips on the page. I need to hide them immediately after click.(Below is screen shot).

I used below code but does not work for me

 $(document).click(function() {
       $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } );
        });

How to resolve this pls help.

EDIT

I am using update panel. will that create problem?

Solution 1

According to the jQueryUI documentation, your code only changes how it closes. What you want is close http://api.jqueryui.com/tooltip/#method-close.

However you might have to change your code a bit to make it work. Judging by your code you use delegation (allowing something else to make the tool tip for your item), instead of applying it directly to your item. According to the documentation close does not work on delegated tooltips.

You'll want something similar to

$('.editButtons').tooltip().click(function() {
    $('.editButtons').tooltip( "close");
})

Solution 2

Ugly hack for closing delegated tooltip (last one opened)

$('div[id^="ui-tooltip-"]:last').remove();

Solution 3

I know it's an old question but I ran into the same problem and used the following way to solve it.

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

$('[data-toggle="tooltip"]').tooltip();

The following fades out the tooltip after a click. After fading it removes it from the DOM (otherwise you might end up with lots of hidden tooltips).

$('[data-toggle="tooltip"]').click(function() {
    $('.tooltip').fadeOut('fast', function() {
        $('.tooltip').remove();
    });
});

Hope this helps someone!

Solution 4

May be a dirty hack but can't you just hide the tooltip element it self by selecting it using "ui-tooltip" which is the class applied to the tooltip container.

$('body').on("click","element_selector",function(event){
$('.ui-tooltip').hide();
});

You should replace "element_selector" by an appropriate selector for your elements.

Solution 5

I took a slightly different approach while using jq 1.12 by hiding all the ui-tooltips when showing the new one. This is tested in Chrome and IE 11 and IE 11(ie8 emulation via http-equiv="X-UA-Compatible" content="IE=8")

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            $(".ui-tooltip").fadeOut(); /* tooltip genocide */
            return $(this).prop('title');
        },
        show: {
            effect: "fade",
            delay: 750
        }
    }
});

hth

View more solutions