Jquery tooltip is not disappearing on click of item
Asked Answered
B

6

9

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?

Bara answered 24/7, 2013 at 10:44 Comment(0)
S
9

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");
})
Saraisaraiya answered 24/7, 2013 at 11:50 Comment(9)
Since you provided no other information, this is only a general guideline. If your buttons don't have the class editButtons it won't work. See jsfiddle.net/aeWvK for helpSaraisaraiya
I used $(docuement).tooltip( "close");Bara
I said that wouldn't work in my answer. document has no tooltips it receives them through delegation. You have to specifically make them on your item(s) by selecting them.Saraisaraiya
Yes you are right. It is applying to individual selectors. But i need it to apply it globally so that any element having tooltip; once clicked its tooltip should disappear. Please suggest.Bara
So it needs to close all open tooltips or just the related one?Saraisaraiya
Changed answer to close all opened tooltips.Saraisaraiya
Is it for all opened tooltips in the docuement?Bara
Yes it is for all opened tooltipsSaraisaraiya
instead of $('.editButtons').tooltip( "close"); I used $(this).tooltip("close");Biostatics
M
5

Ugly hack for closing delegated tooltip (last one opened)

$('div[id^="ui-tooltip-"]:last').remove();
Mernamero answered 7/5, 2014 at 22:9 Comment(2)
In my case I used $('div[class^="ui-tooltip"]').remove(); if certain DOM exists/not exists.Fanfani
Good hack guys @KAZ-to-USANumberless
B
3

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

Beggary answered 22/8, 2016 at 16:27 Comment(1)
Still works great 2/15/2024 jquery 3.6.0 jqueryui 1.13.2Beggary
E
2

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.

Eggleston answered 1/10, 2015 at 15:34 Comment(0)
C
2

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!

Clevelandclevenger answered 21/3, 2016 at 9:37 Comment(2)
I had to rewrite it a bit: $("[data-toggle=\"tooltip\"]").click(function () { var $this = $(this); $(".tooltip").fadeOut("fast", function () { $this.blur(); }); }); else the tooltip will never come back.Garay
@Garay I have used blur eventhough am not getting the tooltip again .Metaphysics
P
-2
$(document).click(function() {
    $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } ).off("focusin focusout");
});
Prig answered 23/9, 2014 at 9:35 Comment(1)
This auto-hides the tooltip after some time. I think that is what the questioner doesn't want. It should close immediate on clicking on it as he wrote.Garay

© 2022 - 2024 — McMap. All rights reserved.