Hide Angular UI Bootstrap popover when clicking outside of it
UPDATE: With the 1.0 release, we've added a new trigger called outsideClick
that will automatically close the popover or tooltip when the user clicks outside the popover or tooltip.
Starting with the 0.14.0 release, we've added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-open
or popover-is-open
attributes.
Since Angular UI Bootstrap 1.0.0, there is a new outsideClick
trigger for tooltips and popovers (introduced in this pull request. In Angular UI Bootstrap 2.0.0, the popover-trigger
has been modified to use angular expressions (Changelog), so the value has to be put in quotes. This code will work with current versions of angular-ui:
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
This code will work with old versions of Angular UI Bootstrap (before 2.0.0):
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>