Jquery: come nascondere o chiudere tutte le descrizioni di bootstrap aperte

Question

In questo modo visualizzo la descrizione comando bootstrap dalla mia funzione di convalida.

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

così quando molte tooltip è aperto e se clicco su un altro tasto, quindi i suggerimenti sono ancora aperte che non è buono. quindi dimmi come nascondere o chiudere tutti i tooltips di bootstarp aperti quando l'utente fa clic su un altro pulsante?

Answer 1

Quando hai centinaia di suggerimenti aperti, credo che tu abbia dato la classe .tooltip per tutto. Quindi, è possibile utilizzare questa scorciatoia per chiudere tutte le descrizioni dei comandi:

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

Utilizza il codice qui sotto per nascondere tutti i suggerimenti.

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

-Help :)

Answer 3

ho fatto il lavoro in questo modo .... solo scorrere nella tabella.

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

Basta usare $('.tooltip').remove();