Tommy Tommy - 2 months ago 10
jQuery Question

Bootstrap popover, hide on click outside?

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

Answer

I found this : http://bootply.com/99372

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

It's almost the same code as you...