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: \'


        
                      

              相关标签:
       
      

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

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

Answer 3

Use the below code for hiding all tooltips.

$('[data-toggle="tooltip"]').tooltip('hide');

-Help :)

Answer 4

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

Answer 5

My sollution is

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