jQuery Bootstrap 弹出框输入字段

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16493003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:13:40  来源:igfitidea点击:

Bootstrap Popover Input Field

jquerytwitter-bootstrap

提问by Nick B

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!

当用户单击另一个输入字段时,如何禁用此弹出窗口?谢谢!

回答by Christoffer

One simple way of hiding it would be to subscribe to blur:

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

回答by user2693017

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

我对 Christoffers 的回答进行了一些测试,并将其最小化:

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

回答by tony

I think its easier if you use HTML5:

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

回答by Fabiano

You can hide the "popover" using "trigger"!

您可以使用“触发器”隐藏“弹出窗口”!

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

回答by Vinicius Correa

Let's assume your link is

让我们假设您的链接是

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

you can hide the popover by simply adding the following js:

您可以通过简单地添加以下 js 来隐藏弹出框:

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