CODEWITHSUNDEEP
jqueryjquery-uiasp.net-ajaxupdatepaneljquery-ui-tooltip
Rajaram Shelar
Rajaram Shelar

Reputation: 7877

Jquery tooltip is not disappearing on click of item

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

enter image description here

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?

Upvotes: 9

Views: 19027

Answers (6)

Joe Johnston
Joe Johnston

Reputation: 2936

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

Upvotes: 3

Franky
Franky

Reputation: 97

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!

Upvotes: 2

Biruk Abebe
Biruk Abebe

Reputation: 2233

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.

Upvotes: 2

hadrian
hadrian

Reputation: 1

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

Upvotes: -2

Chili Con Code
Chili Con Code

Reputation: 55

Ugly hack for closing delegated tooltip (last one opened)

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

Upvotes: 5

user694844
user694844

Reputation: 1187

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

Upvotes: 9

Related Questions