Поле ввода всплывающего окна Popstrap

Возможно ли инициировать событие popover при щелчке пользователем в поле ввода, а затем отключить его, когда пользователь нажимает на другое поле? Здесь у меня есть, но он не отключается, когда пользователь щелкает в другом поле.

 <input id="example" />

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

Как я могу отключить этот popover, когда пользователь нажимает на другое поле ввода? Спасибо!

Ответы

Ответ 1

Одним простым способом скрыть это было бы подписаться на blur:

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

Ответ 2

Я сделал несколько тестов с ответами Christoffers и минимизировал их:

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

Ответ 3

Я думаю, что его проще, если вы используете HTML5:

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

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

Ответ 4

Вы можете скрыть "popover" с помощью "триггера"!

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

Ответ 5

Предположим, что ваша ссылка

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

вы можете скрыть popover, просто добавив следующие js:

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