CODEWITHSUNDEEP
javascriptangularjs
Simon
Simon

Reputation: 1169

AngularJS popover - hide on clicking on body (fiddle inside)

I've got a simple list of items - each has a button with a bootstrap pop-over.

1/ I'd like to make sure only one pop-over is open at a time - currently i can click on each button and have multiple open/overlapping pop-overs.

2/ On clicking outside of the buttons - the currently open pop-over should close.

Example Fiddle here:

http://jsfiddle.net/5ww8e/79/

var app = angular.module("app", []);
app.controller('my_controller', function($scope) {  
  $scope.all_countries = [{"id":28,"title":"Sweden"}, {"id":56,"title":"USA"}, {"id":89,"title":"England"}];
});

app.directive('bsPopover', function() {
    return function(scope, element, attrs) {
        element.find("a[rel=popover]").popover({ placement: 'bottom', html: 'true'});
    };
});

Upvotes: 0

Views: 1604

Answers (1)

Marc M.
Marc M.

Reputation: 3791

Sadly there is nothing build in for this, something like a popover group with certain behaviors. Instead you have to implement this yourself.

If you take a look at the Bootstrap Docs on Popovers you will find a lot of helpful methods and events for Popovers.

In your case it is as simple as adding an event handler to listen for when a "show" event is triggered and closing any other popovers. I added just three lines to your Fiddle to do this.

element.find("a[rel=popover]").on('show.bs.popover', function () {
    $('a[rel=popover]').popover('hide');
});

Full updated Fiddle here

Note that I am using a "show" event and not a "shown" event. If I where to close all the popover after the popover I just selected is is shown it would close all the popovers including the one I just opened.

Upvotes: 1

Related Questions