Jquery: How hide or close all open bootstrap tooltip

Question

This way I am showing bootstrap tooltip from my validation function.

var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
        $(inputElement).addClass('validation-error');
        inputElement.tooltip("destroy")
            .addClass("error")
            .tooltip(options);
inputElement.tooltip("show");

so when many tooltips is open and if i click on another button then tooltips are still open which is not good. so tell me how to hide or close all open bootstarp tooltips when user click on another button?

Praveen Kumar Purushothaman · Answer 1 · 2016-01-18T12:06:57.517

46

When you have 100s of tooltips open, I believe you have given .tooltip class for everything. So, you can use this shorthand to close all the tooltips:

$(".tooltip").tooltip("hide");

Snippet

$(function () {
  $('[data-toggle="tooltip"], .tooltip').tooltip();
  $('[data-toggle="tooltip"], .tooltip').tooltip("show");
  $("button").click(function () {
    $('[data-toggle="tooltip"], .tooltip').tooltip("hide");
  });
});

body {padding: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<br /><br />
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<br />
<br /><br /><br />
<button>Hide All</button>

edited Jan 18 '16 at 12:06

answered Jan 18 '16 at 12:01

Praveen Kumar Purushothaman

164,888
24
203
252

sorry did not work. this is my tooltip html `
First name is required
` – Thomas Jan 18 '16 at 12:10
i guess i need to iterate table and extract each tooltip from there and then hide.........what u say? – Thomas Jan 18 '16 at 12:10
@Thomas What's preventing you to create a demo or snippet? Make it easy for both of us na? Did my example code work or not? – Praveen Kumar Purushothaman Jan 18 '16 at 12:11
@Thomas I agree man. I see you are a good dev. Having a same ground for working will help both of us. – Praveen Kumar Purushothaman Jan 18 '16 at 12:11
This is very useful for android `WebView` .. the `tooltip` sticks onscreen +1 – hexagod Nov 21 '19 at 00:18
@hexagod Thanks! – Praveen Kumar Purushothaman Nov 21 '19 at 21:35
This was the only thing that works for me `$('[data-toggle="tooltip"], .tooltip').tooltip("hide");` – sebasira Apr 28 '21 at 01:29
@sebasira Thanks for sharing. In that case, those elements do not have the `tooltip` class then. Just the `data-toggle` attribute. – Praveen Kumar Purushothaman Apr 28 '21 at 07:40
1

Please excuse me, I maybe did not express well. What I meant was that of all other solutions I've tried yours was the only that really works! Thank you! – sebasira Apr 28 '21 at 12:30

score 3 · Answer 2 · answered Oct 17 '19 at 12:04

3

My sollution is

$(".ui-tooltip").css('display','none');

answered Oct 17 '19 at 12:04

JK2030

67
1
2

score 1 · Answer 3 · answered Jan 18 '16 at 12:40

i have done the job this way....just iterate in table.

function HideToolTips() {
    $('#StudentGrid tbody > tr').each(function (i, row) {
            $(this).find("input[id*='FirstName']").tooltip('hide');
            $(this).find("input[id*='LastName']").tooltip('hide');
            $(this).find("select[id*='cboState'] :selected").tooltip('hide');
            $(this).find("select[id*='cboCity'] :selected").tooltip('hide');
    });
}

score 0 · Answer 4 · answered Feb 03 '21 at 17:20

this will help close tooltip at any button, any id

$(document).on("click","button",function(){$(this).trigger("blur")})
$(document).on("mouseup","button",function(){$(this).trigger("blur")})
$(document).on("mousedown","button",function(){$(this).trigger("blur")})

Tooltip will close button's tooltip on button click

score 0 · Answer 5 · answered Sep 21 '21 at 00:40

0

I was looking to do this manually when my tooltips were not closing after a button click. I found this method helpful.

Source

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

answered Sep 21 '21 at 00:40

psychopython

39
1
4

Jquery: How hide or close all open bootstrap tooltip

5 Answers5

Linked