Bootstrap Liste Champ De Saisie

Est-il possible de déclencher une liste d'événements lorsqu'un utilisateur clique dans un champ de saisie, puis le désactiver lorsque l'utilisateur clique dans un autre domaine? Voici ce que j'ai, mais il ne désactive pas lorsque l'utilisateur clique sur un autre champ.

 <input id="example" />

 <script>
  $(document).ready(function() {
    $(function ()  
      { $("#example").popover({title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!"});  
    });  
   });
 </script>

Comment puis-je faire de cette liste désactiver lorsque l'utilisateur clique dans un autre champ de saisie? Merci!!!!

Une remarque, $(handler) est équivalent à $(document).ready(handler), donc il n'y a pas besoin d'utiliser les deux: api.jquery.com/ready
Merci @Christoffer!

OriginalL'auteur Nick B | 2013-05-11

  1. 32

    Une façon simple de se cacher, il serait pour vous abonner à blur:

    $(function () {
    $("#example")
        .popover({ title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })
        .blur(function () {
            $(this).popover('hide');
        });
});

    OriginalL'auteur Christoffer

  2. 12

    J'ai fait quelques essais avec Christoffers réponse et il a obtenu réduite:

    $('#element').popover({ trigger: 'focus', title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })
    Bonus supplémentaire; la liste ne disparaissent pas lorsque vous cliquez sur le champ de saisie à deux reprises. Exactement ce dont j'avais besoin!

    OriginalL'auteur user2693017

  3. 5

    Je pense que c'est plus facile si vous utilisez HTML5:

    $(document).ready(function () {
    $('#example').popover();
}

<input id="example" type="text" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="It's so simple to create a tooltop for my website!" />

    OriginalL'auteur tony

  4. 2

    Vous pouvez masquer la "liste" à l'aide de "déclencheur"!

    <script>
$(document).ready(function() {
     $(function ()  
     {
         $("#contato").popover({title: 'Twitter Bootstrap Popover', trigger: 'focus', content: "It's so simple to create a tooltop for my website!"});  
     });  
});
</script>

    OriginalL'auteur Fabiano

  5. 1

    Supposons que votre lien est

    <a href="#foo" id="bas">bar<a>

    vous pouvez masquer la liste en ajoutant simplement le suivant js:

    $('#bas').on('click',function() {
    $('#example').popover('hide');
});

    OriginalL'auteur Vinicius Correa