Bootstrap Popover Input Field

Question

Is it possible to trigger a popover event when a user clicks in an input field, then disable it when the user clicks in another field? Here's what I have, but it does not disable when the user clicks in another field.

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

How can I make this popover disable when the user clicks in another input field? Thank you!

Answer 1

One simple way of hiding it would be to subscribe to 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');
        });
});

Answer 2

I made some testing with Christoffers answer and got it minimized:

$('#element').popover({ trigger: 'focus', title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })