Bootstrap popover, hide on click outside?

jquery twitter-bootstrap

76,949

Solution 1

$('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...

Solution 2

Just add this element to close the popover on next click.

data-trigger="focus"

Reference from here: Bootstrap Popover

Solution 3

In fact, you don't even need JS, since there's already a setting for this in Bootstrap.

See : http://getbootstrap.com/javascript/#dismiss-on-next-click

"Specific markup required for dismiss-on-next-click For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes."

Ex. :

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

Solution 4

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

Solution 5

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"

View more solutions

76,949

Tommy

My name is Tommy 25 years old. On my sparetime i make websites just for fun. I have coded PHP/HTML/CSS/mySQL for 5-6 years and still learning new things! :)

Updated on January 26, 2021

Comments

Tommy about 3 years
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 
```
- Rahil Wazir over 10 years
  
  better check your z-index i think something is overcome to popupbox
- Tommy over 10 years
  
  @RahilWazir That helped a little bit, the popover has the class .fade and fade in, and .fade has opacity:0 so it is still there but still not^^ Now i need to find out how to remove the opacity from there, because when i do that the code i have for closing it wont work
- Rahil Wazir over 10 years
  
  make a fiddle it'll be helpful.
- Irvin Dominin over 10 years
  
  What do you mean with Doesn't work ? Can you provide a demo on jsfiddle?
Erick Smith almost 10 years

Problem with this, is for some reason, the manually called popover('hide') doesnt remove it from the dom so the popover div remains and covers anything under it.
BENARD Patrick almost 10 years

Could you explain your problem or create a fiddle ?
Erick Smith almost 10 years

Bootstrap made a release that fixed my problem so your solution now works as you described. Prior to that, the popover would maintain itself in the dom. It would be invisible but still hold its HxW thus making any elements below it's z-index unclickable.
simPod almost 9 years

Works for tooltip too, just change all popover strings for tooltip
Ted Nyberg over 7 years

It's always helpful if you include the relevant (code) parts from the external resource, instead of just linking to it.
Phil Andrews over 7 years

Though it's not the most complete answer, this is the correct way to do it. However, this does not work if you choose to put any interactive content inside because all clicks will close the popover.
Stepan Stepanov over 7 years

I would recommend using the "mousedown" event instead of the "click". This way popover will be also hidden during long selections or drag'n'drops.
Dimitar Darazhanski about 7 years

In needs data-trigger="focus" otherwise it does not work. Example: <a tabindex="0" role="button" data-trigger="focus" data-toggle="popover" data-container="body" data-placement="top" data-content="Text"><i class='glyphicon glyphicon-info-sign'></i></a>
Gautam Patadiya about 7 years

Thank you your solution is working. Bootstrap provide default setting for it.
Elie Morin almost 7 years

This solution will work almost anytime. I think a stoppropagation can't block it. The problem is, for each click you do, this function will loop for every popover. Other solution can be better, like the build-in one. In some case, you can have problem with them, so this code will do the job.
Lombas almost 7 years

This closes the popover on second click, not on outside click. This closes even If i click inside the popover
Taufik Nur Rahmanda over 6 years

Thank you, this is currently the correct way which I'm looking for
jumps4fun about 6 years

Anyone care to explain why this answer is downvoted? It seems like the perfect answer to me. It's short, specific and correct, and even references the official documentation. I don't get it.
Asaf about 6 years

I wasn't the one who downvoted it, but the reason is probably that it's not what the guy asked. He (and I) want the popover to disappear only when clicking OUTSIDE of it. data-trigger="focus" hides it also when clicking inside.
Vivekraj K R about 5 years

What is 'inState' here?
SumitK about 5 years

inState tells the current state of the popover. Here we are resetting the popover click state using 'inState.click=false' which would have been otherwise 'true' as we are using the click event to show this popover. 'inState.hover' 'inState.focus' are some options available.
SumitK about 5 years

Please up-vote if you found this useful. Vivekraj K R
Anshul Riyal over 4 years

@Asaf no it's not... I want to close in both inside and outside click, but only working when i am clicking outside.. how can i archive both. By inside , i meant the ICON which on click lead to appear popover. yea it do dispear on click inside popover body thou.
Joseph Miller about 4 years

yeah it works. but when you try to click the POP OVER again. it wont work.
froston over 3 years

For Bootstrap 4 getbootstrap.com/docs/4.0/components/popovers/…