Managing popovers in Bootstrap 4

bootstrap-4-popover.js

/*
**  This gist shows how to implement Bootstrap 4 popovers that:
**  a) disappear automatically when the user clicks outside the popover
**  b) only appear one at a time
*/

// Hide other popover when new one appears
$('[data-original-title]').on('show.bs.popover', function () {
  $('[data-original-title]').not(this).popover("hide");
});

$('body')
  .on('hidden.bs.popover', function(e) {
    // Bootstrap 4 bugfix, see https://github.com/twbs/bootstrap/issues/16732#issuecomment-232138662
    $(e.target).data('bs.popover')._activeTrigger.click = false;
  })
  .on('click', function(e) {
    // Hide popover when user clicks outside of it
    if (typeof $(e.target).data('original-title') == 'undefined' &&
      !$(e.target).parents().is('[data-original-title]') &&
      !$(e.target).parents().is('.popover.in')) {
      $('[data-original-title]').popover('hide');
    }
  });