Rectangle 27 0

javascript Closing Bootstrap Popover When User Clicks Outside Popover?


$(document).mouseup(function (e) {
    if ($('.popover').has(e.target).length === 0) {
        $('.popover').toggleClass('in').remove();
        return;
    }
});

This does work when a user clicks outside a popover, but if the user clicks the popover link again, the popover does not hide.

Note
Rectangle 27 0

javascript Closing Bootstrap Popover When User Clicks Outside Popover?


if ($(this).data('bs.popover').tip().hasClass('in')) {
    $(this).popover('toggle');
}

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

For me, I used this code inside the $each: if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { if ($(this).data('bs.popover').inState.click) { $(this).data('bs.popover').inState.click = false; } $(this).popover('hide'); return; }

Thanks a lot. I needed to check $(this).data('bs.popover') before calling tip(), but ti solves the issue!

This only partially works for me. Popovers disappear if I click outside or click another popover, but then when I click the same popover again, it only appears on the second click. Why?

Note