How to dismiss a Twitter Bootstrap popover by clic

Question

Can we get popovers to be dismissable in the same way as modals, ie. make them close when user clicks somewhere outside of them?

Unfortunately I can't just use real modal instead of popover, because modal means position:fixed and that would be no popover anymore. :(

Answer 1

Modified accepted solution. What I've experienced was that after some popovers were hidden, they would have to be clicked twice to show up again. Here's what I did to ensure that popover('hide') wasn't being called on already hidden popovers.

$('body').on('click', function (e) {
    $('[data-original-title]').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) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

Answer 2

Most simple, most fail safe version, works with any bootstrap version.

Demo: http://jsfiddle.net/guya/24mmM/

Demo 2: Not dismissing when clicking inside the popover content http://jsfiddle.net/guya/fjZja/

Demo 3: Multiple popovers: http://jsfiddle.net/guya/6YCjW/

---

Simply calling this line will dismiss all popovers:

$('[data-original-title]').popover('hide');

---

Dismiss all popovers when clicking outside with this code:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

The snippet above attach a click event on the body. When the user click on a popover, it'll behave as normal. When the user click on something that is not a popover it'll close all popovers.

It'll also work with popovers that are initiated with Javascript, as opposed to some other examples that will not work. (see the demo)

If you don't want to dismiss when clicking inside the popover content, use this code (see link to 2nd demo):

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

Answer 3

I was having issues with mattdlockyer's solution because I was setting up popover links dynamically using code like this:

$('body').popover({
        selector : '[rel="popover"]'
});

So I had to modify it like so. It fixed a lot of issues for me:

$('html').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('destroy');
    }
  });
});

Remember that destroy gets rid of the element, so the selector part is important on initializing the popovers.

Answer 4

simply add this attribute with the element

data-trigger="focus"

Answer 5

This is late to the party... but I thought I'd share it. I love the popover but it has so little built-in functionality. I wrote a bootstrap extension .bubble() that is everything I'd like popover to be. Four ways to dismiss. Click outside, toggle on the link, click the X, and hit escape.

It positions automatically so it never goes off the page.

https://github.com/Itumac/bootstrap-bubble

This is not a gratuitous self promo...I've grabbed other people's code so many times in my life, I wanted to offer my own efforts. Give it a whirl and see if it works for you.

Answer 6

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });