Bootstrap popover, hide on click outside?

user_2559797 0
Viewed 79680

using bootstrap popover, and now im trying to get this code to click outside the popover to close the 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');
        }
    });
});

But when i use this part, i can close the popover but i cant click the other buttons, anyone got any idea how i can do that?

All the buttons: 

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work
twitter-bootstrap jquery
10 Answers

Try this. It will close the popover when clicking the outside of the popover. 

$('body').on('click', function (e) {
//did not click a popover toggle, or icon in popover toggle, or popover
if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('[data-toggle="popover"]').length === 0
    && $(e.target).parents('.popover.in').length === 0) {
    (($('[data-toggle="popover"]').popover('hide').data('bs.popover') || {}).inState || {}).click = false;
}
});

Another solution,

<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>

add tabindex="0" and data-trigger="focus"

user_71874770

Just hiding popover won't work. You will need to click twice to show popover again. https://github.com/twbs/bootstrap/issues/16732

To make it work correctly for Bootstrap 3.3.6. Try this:

$('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false;
            }
        });
    });

Bootstrap 4 uses _activeTrigger instead of inState:

$(e.target).data("bs.popover")._activeTrigger.click = false
user_100919480

Bootstrap cannot reach indepentently popover id's. We have to read aria-describedby attribute related with the element.

Code below is removes popover:

$("#"+$(relatedElementId).attr("aria-describedby")).remove();

relatedElementId: popover's associated element

user_130854600 
**Try this**,below code is work for me,
Put below code in js file

$(function () {
    $('[data-toggle="popover"]').popover();
});
$('html').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
           if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

and HTML tag should be like this

<a data-toggle="popover"   data-placement="bottom" data-content-id="notifications-content">
user_98690420
Related