javascript - Bootstrap popover hide on outside click. Opens only on second click - Stack Overflow

admin管理员组

文章数量:1026390

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

Share Improve this question Follow asked Dec 29, 2015 at 21:25 OlegOleg 29922 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

Share Improve this question Follow asked Dec 29, 2015 at 21:25 OlegOleg 29922 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

本文标签： javascriptBootstrap popover hide on outside click Opens only on second clickStack Overflow