jQuery: How to close popover when click outside?

Question

I'm using Krajee Bootstrap Popover X. It works great except that it won't close when i click outside the popover. It only closes when I click the button that triggers the popover or other popover buttons. I tried the examples from here How to dismiss a Twitter Bootstrap popover by clicking outside? but it didn't work

Answer 1

Here is the solution for my own question.

var idpop = []; //Creating an array to store the id
//Since that when you create a popover using Krajee Popoover X plugin,
//you always add id's to it.
//By default, only one popover will displayed at a time.
$('.popover').on('shown.bs.modal', function() {
  //Get the id of the popover that is currently displayed
  idpop.push($(this).attr('id')); //Add the id to the Array
});
$('.popover').on('hidden.bs.modal', function() {
  //Empty the array when the popover is dismissed
  idpop = [];
});
$('html').on('click', function(e) {
  //when click outside the popover then dismiss the popover
  if ($(e.target).closest('.popover').length == 0) {
    $('#' + idpop[0]).popoverX('hide');
  }
});