web-dev-qa-db-fra.com

Détruire toutes les infobulles de bootstrap dans une div

J'ai un $("#settings") div avec plusieurs info-bulles d'amorçage attachées aux éléments enfants.

Par exemple,

<div id="settings" style="display: flex;">
  <tbody>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
  </tbody>
</div>

Je veux faire $("#settings").tooltip('destroy') pour me débarrasser de toutes ces info-bulles lorsque vous appuyez sur un bouton, mais cela ne fonctionne pas, je suppose, car les info-bulles ne sont pas en réalité sur les paramètres div, mais à l'intérieur.

Cependant, j'ai aussi essayé $('#settings').find('*').tooltip('destroy') et cela n'a pas fonctionné non plus.

Est-ce à cause de la façon dont je les initialise?

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Qu'est-ce qu'un moyen rapide et facile d'accéder à toutes les info-bulles d'une div?

javascriptjquerytwitter-bootstraptwitter-bootstrap-tooltip
18
LSD

Vous avez initialisé tous les éléments ayant l'attribut data-toggle="tooltip" à l'aide du conteneur d'éléments (le corps) trough delegation ( fiddle ):

$("body").tooltip({ selector: '[data-toggle=tooltip]' });

donc pour le désactiver en utilisant destroy, vous devez le faire sur le corps:

$('body').tooltip('dispose');

Si vous voulez le faire sans délégation, vous pouvez initialiser chacun des éléments ( violon ):

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

et le détruire:

$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older

Si vous voulez toujours initialiser avec delegation et l’empêcher de fonctionner avec disable ( fiddle ):

$('body').tooltip({ selector: '[data-toggle=tooltip]' });
$('body [data-toggle="tooltip"]').tooltip('disable');

Explication de la différence entre détruire et désactiver extraite de réponse de Jasny :

$('[rel=tooltip]').tooltip()          // Init tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips
$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips

C’est la réponse que j’ai eue dans Bootstraps github - Puisque vous utilisez la délégation (c’est-à-dire l’option de sélecteur), je pense qu’il n’ya qu’une seule instance d’info-bulle (sur le corps). Par conséquent, essayer de détruire des occurrences d’infobulle inexistantes sur les éléments déclencheurs eux-mêmes n’a aucun effet . Comparez la version non déléguée: http://jsfiddle.net/zsb9h3g5/1/

36
Technotronic

A partir de la version 4 de bootstrap et selon la documentation, vous devez utiliser dispose car destroy n'est plus défini Exemple est donné ci-dessous:

$('#element').tooltip('dispose')
7
msoliman

La réponse choisie détruit les info-bulles afin qu'elles disparaissent complètement et que leurs fonctionnalités soient désactivées.

Si vous voulez simplement vous débarrasser de toutes les info-bulles en même temps tout en conservant leurs fonctionnalités, utilisez $('.tooltip').remove();.

5
kjdion84

J'ai eu une situation dans Bootstrap 3 avec des info-bulles sur un <select> où $('body').tooltip('destroy') ne fonctionnerait pas sur les info-bulles initialisées via $('[data-toggle="tooltip"]').tooltip({container:'body'}).

Nous avons fini par utiliser onchange="$('.tooltip').remove()" pour supprimer toutes les info-bulles. Cette méthode fonctionne là où les méthodes BS ne fonctionneraient pas. J'espère que ça aide quelqu'un avec une situation similaire ????

Remarques

Mon opacity:0 <select> a été placé sur un bouton BS pour utiliser les menus déroulants du système d'exploitation au lieu d'un menu déroulant traditionnel. Le bouton ne reçoit pas de survol en raison de la superposition. L'info-bulle a donc été ajoutée à l'invisible <select>.

J'ai également ajouté this.blur() à l'événement onchange. Sinon, <select> garde la mise au point empêchant l’aide de se déclencher sur des survols répétitifs ????

0
Mavelo

Pour ne détruire que les info-bulles de #settings, procédez comme suit:

$('#settings [data-toggle="tooltip"]').tooltip('destroy');
0
isherwood