Bootstrap Popover Input Field

Bootstrap Popover Input Field

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.

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

Solutions/Answers:

Solution 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');
        });
});

Solution 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!" })

Solution 3:

I think its easier if you use 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!" />
Related:  bootstrap tooltip\popover - solving inconsistent placement to the left

Solution 4:

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> 

Solution 5:

Let’s assume your link is

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

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

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

References