Jquery：開いているブートストラップのツールチップをすべて非表示にするか閉じるには

Question

このようにして、検証機能からブートストラップのツールチップを表示します。

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

多くのツールチップが開いているときに、別のボタンをクリックするとツールチップが開いていて、それはうまくいきません。ユーザーが別のボタンをクリックしたときに、開いているブートストラップのツールチップを隠すか閉じる方法を教えてください。

Answer 1

ツールチップが100個開いている場合は、.tooltipクラスをすべて提供していると思います。だから、あなたはすべてのツールチップを閉じるには、この速記を使用することができます。

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

スニペット

$(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

すべてのツールチップを隠すために、以下のコードを使用します。

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

-Help :)

Answer 3

私はちょうどテーブルに繰り返す....仕事をこのように行っています。

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 4

だけ$('.tooltip').remove();