Used solutions from other answers to hide Bootstrap popover on outside click.

However it then requires two clicks to open the popover again (if I closed it by clicking outside).

It works alright and opens on first click when I use the button to close it.

Here is problem recreated:

The html used:

<!-- Popup button -->
<a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-toggle="popover" data-placement="bottom">Menu</a>

<!-- Popup content -->
<div id="menu-content">
  <h1>Hello</h1>
  <p>Good bye</p>
  <a href="#">Link</a>
</div>

And the jQuery:

$('#menu-button').popover({
  content: $('#menu-content').html(),
  html: true
});
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
    !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Any ideas why it happens and how to make popup always open on first click?

One note: I find it impossible to use this "official" solution because it makes it impossible to click on links inside popup:

Used solutions from other answers to hide Bootstrap popover on outside click.

However it then requires two clicks to open the popover again (if I closed it by clicking outside).

It works alright and opens on first click when I use the button to close it.

Here is problem recreated: http://codepen.io/olegovk/pen/BjQmQe

The html used:

<!-- Popup button -->
<a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-toggle="popover" data-placement="bottom">Menu</a>

<!-- Popup content -->
<div id="menu-content">
  <h1>Hello</h1>
  <p>Good bye</p>
  <a href="#">Link</a>
</div>

And the jQuery:

$('#menu-button').popover({
  content: $('#menu-content').html(),
  html: true
});
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
    !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Any ideas why it happens and how to make popup always open on first click?

One note: I find it impossible to use this "official" solution because it makes it impossible to click on links inside popup: http://getbootstrap./javascript/#dismiss-on-next-click

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

You don't need extra Js to close the popover, as the documentation says docs

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

            <a tabindex="0" 
            class="btn btn-lg btn-danger" 
            role="button" data-toggle="popover" 
            data-trigger="focus" title="Dismissible popover" 
            data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
            </a>

data-trigger="focus" close the popover on the next click of the users.

In many cases (mostly the rest of the code in your document) once you leave the popover, you have to regain focus on it. This event is not easily binding the click event to the html or body. Buttons tend to regain the focus much better than hyperlinks. (This is my theory, I'd question it, but it's what I've read here and there) The point is, this code works lol that's the important thing, isn't it?

I suggest you change the hyperlink to a button and style it to make it look as a hyperlink if you need to and use the code in the jFiddle provided here

$('[data-toggle="popover"]').popover();




$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 &&       
$('.popover').has(e.target).length === 0) {
        $(this).popover('hide');
    }
});
});

Here is working jfiddle