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?

Answer 1

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>

Answer 2

My sollution is

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