Hide Angular UI Bootstrap popover when clicking outside of it

Question

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.

Answer 1

What you are looking for is

<button
      popover-trigger="outsideClick" 
      class="btn btn-default">
   Right
</button>

From the documentation - The outsideClick trigger will cause the popover to toggle on click, and hide when anything else is clicked.

Answer 2

Add onclick="void(0)" behavior to some of your background elements which when tapped will get rid of the popovers.

Have a look at https://github.com/angular-ui/bootstrap/issues/2123

Answer 3

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.

Answer 4

You can use:

Markup

<div ng-app="Module">
    <div ng-controller="formController">
        <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" 
          popover-placement="left" type="button" class="btn btn-default">
             Popover With Template
        </button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
        </script>
    </div>
</div>

Javascript

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>

Answer 5

1) Use ng-bootstrap for Popover.

2) Update the ng-bootstrap version to 3.0.0 or above. i.e npm install --save @ng-bootstrap/ng-bootstrap@3.0.0

3) After updating, you may use [autoClose] functionality of Ngbpopover.

<button type="button" class="btn btn-outline-secondary" popoverTitle="Pop title" [autoClose]="true" ngbPopover="Click anywhere or press Escape to close (try the toggling element too)">Click to toggle</button>

4) Hope it helps !

Answer 6

What about the 'outsideClick' option in the '$uibTooltipProvider' setTriggers method. Documentation says "The outsideClick trigger will cause the tooltip to toggle on click, and hide when anything else is clicked." Documentation