Question

当用户点击输入字段时是否可以触发弹出窗口事件，然后在用户点击其他字段时将其禁用？这就是我所拥有的，但是当用户点击另一个字段时它不会禁用。

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

当用户点击其他输入字段时，如何禁用此popover？谢谢！

Answer 1

隐藏它的一种简单方法是订阅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

我用Christoffers的答案进行了一些测试，并将其降至最低：

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

Answer 3

我认为如果你使用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!" />

Answer 4

您可以使用“触发器”隐藏“popover”！

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

Answer 5

我们假设你的链接是

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

只需添加以下js即可隐藏popover：

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

Bootstrap Popover输入字段

5 个答案: