Search code examples
twitter-bootstrap-3bootstrap-popover

Bootstrap's popover doesn't open when it has been closed from another element


I have just one element that triggers a popover, and another element that closes it. If the popover is closed by this another element, then the next time I click the trigger, the popover won't show. I have to click it twice in order to see it opening.

I'm using Bootstrap v3.3.6 (latest version today). If I use previous versions of Bootstrap (i.e., v3.0.2), it works fine. Another questions in SO that solve this issue are using older versions of Bootstrap.

An example that illustrates this issue (in Codepen):

HTML:

<button class="btn btn-default" data-toggle="popover" data-content="This is a popover">
    Toggle popover
</button>
<button class="cpo btn btn-danger">
    Close popover
</button>

JS

$('[data-toggle="popover"]').popover(); 
$(".cpo").on("click", function(e) {
    e.preventDefault();
    $('[data-toggle="popover"]').popover('hide'); 
});

Solution

  • It's a known bug, with a fix pending of revision: github