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?

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

Answer 2

Ugly hack for closing delegated tooltip (last one opened)

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