Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Angular UI Bootstrap popover when clicking outside of it

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.

like image 689
bryan Avatar asked May 28 '15 16:05

bryan


People also ask

How to close popover when click outside angular?

The trick here is to drop the surrounding <div> and put the popover-trigger="focus" right on the button. Finally, in your controller, implement the closePopover function: vm.

How do you hide a popover?

To hide the displayed popover, use the popover(“hide”) method.

What is ngbPopover?

ngbPopover. The string content or a TemplateRef for the content to be displayed in the popover. If the title and the content are falsy, the popover won't open. Type: string | TemplateRef<any>| null | undefined. openDelay.


1 Answers

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.

like image 71
icfantv Avatar answered Sep 18 '22 22:09

icfantv