I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the document
or body
that isn't the popover.
The closest thing I have found to accomplishing this is to create a directive (found this answer) but this is for a manual trigger if a variable is true or false.
Could anyone help me figure out how to to get it to close if I click on anything that isn't the popover?
I don't mind using jQuery $(document).click(function(e){});
I just have no clue how to call a close.
<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
Normally popover-trigger="focus"
would do the trick, however my popover contains content that needs to be clicked on. I have an ng-click
inside my popover that get's ignored if I use the focus trigger so I am looking for a not-so-conventional way to get around that.
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.