How to hide uib-popover on click outside of the popover in angular JS?

Question

<button class="btn btn-default blue btn-lg h-ask btn-block" popover-placement="bottom" uib-popover-template="popover_home.templateUrl">ASK</button>

The above is the code for angular js popover, in the html template of the Popover two input fields also there , so when user submits the html form inside popover i will have control over the popover , but i need to manually close when user opens this popover and does not do any things on the popover(eg: clicking outside the popover).

Any idea about this ? I used "popover-trigger='focus'",but it doesnt allows me to write into the input field (whenever hover the popover it closes)

Possible duplicate, the solution is [here](http://stackoverflow.com/questions/30512748/hide-angular-ui-bootstrap-popover-when-clicking-outside-of-it) with a working [plunkr](http://plnkr.co/edit/K7cYQSDEBS3cHvDfJNLI?p=preview) — Jax, Jan 07 '16 at 09:38

score 12 · Accepted Answer · answered Jan 26 '16 at 12:54

12

Don't know which version of angular-ui boostrap you are using, but I'm using the latest (1.1.1) and adding this do the trick:

popover-trigger="outsideClick"

You can see in this demo.

popover close when click outside

Hope it helps!

answered Jan 26 '16 at 12:54

canals

483
5
10

10

I don't know why, but this not work for me (I've checked version), but `popover-trigger="'outsideClick'"` works... – kuanyui Nov 25 '16 at 06:34
In versions 2.x.x, you must use popover-trigger="'outsideClick'" (note the single quote within the double quote) – kane May 30 '18 at 00:01

Merlin · Answer 2 · 2021-01-11T11:18:45.947

2

For those who don't read comments :-) Based on @kuanyui comment if it dosen't work with the accepted answer try to add simple cotes '

popover-trigger=" 'outsideClick' "

edited Jan 11 '21 at 11:18

answered Jun 15 '19 at 11:45

Merlin

4,907
2
33
51

How to hide uib-popover on click outside of the popover in angular JS?

2 Answers2

Linked