How To Hide Bootstrap Popover When Click Outside Popover?

Andrianto Handoko

Javascript, Programming

Thursday, March 12, 2015

Belum ada komentar

Hi, I want to share about how to hide bootstrap popover when click outside popover. I have added bootstrap popover on my site but it won't automatically close when I click outside the popover. It was different with the example I know and my client won't take it.

So I do research and found this has a solution and I already implement it and it work!
Here is the solution:

You need to declare your popover with 

data-toggle="popover"

 And you need to add javascript like this

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

 And then you can see that this code working like a charm