Comment fermer popovers Bootstrap (ou tout élément en général) lorsqu'un utilisateur clique loin de?

Question

J'utilise l'objet popover de la bibliothèque Twitter Bootstrap en mode manuel et je me demandais comment je devrais aller sur la fermeture de l'info-bulle lorsque l'utilisateur clique loin de.

Voici mon code HTML:

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>

et mon JavaScript:

$('#stats-bar').click(function(e) {
        $(this).popover('show');
});

Comment puis-je cacher la popover lorsque l'utilisateur clique partout mais le popover lui-même? Je pensais à l'aide d'un div transparent fixe derrière le popover et mis son événement click mais je ne suis pas sûr est la meilleure façon.

Answer 1

Je choisi d'utiliser un div transparent fixe derrière le popover et mis son événement click comme cela semble être la solution la plus robuste et simple.

Answer 2

Je fini par câblage jusqu'à l'événement click document et cacher les infobulles à ce point

      $(document).click(function (e)
      {
          // check the parents to see if we are inside of a tool tip.  If the click came
          // from outside the tooltip, then hide our tooltip
          if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
      });

Si vous utilisez une option de déclenchement manuel et le câblage à l'événement Cliquez pour afficher l'info-bulle vous devrez appeler e.stopPropagation () pour empêcher l'événement click document de mise à feu lors de l'affichage l'info-bulle.

Answer 3

Qu'en est-il un écouteur d'événement click générique qui déclenche où que vous cliquez dans le corps? Vérifiez ce post, il ressemble à ce que vous essayez d'atteindre.

https://stackoverflow.com/a/2125122/1013422

Vous ne l'utiliser pour fermer la popover réelle

$('#stats-bar').popover('hide')

Je ne définir la fonction lorsque l'événement pop-up est exécuté puis retirez une fois que vous avez fermé la fenêtre, de cette façon vous n'êtes pas constamment à l'écoute des événements de clic.