Hide Bootstrap Popvers on click outside

Akward!

by mischah

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<main>
    <p>
        <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>    
    </p>
    
</main>

CSS

main { padding: 40px; }

JavaScript

/**
 * @file Adding functionality related to bootstrap popovers.
 * @author Michael Kühnel <[email protected]>
 */

/**
 * Make sure our global object is available.
 * @namespace kira
 * @ignore
 */
var kira = window.kira || {};

/**
 * Namespace of the module.
 * Aliasing the jQuery Namespace via Self Invoking Anonymous Function.
 * @namespace popover
 * @memberof kira
 * @param 	{jQuery} $	passing the jQuery object to make $ available even when
 *                    	using jQuery.noConflict()
 */
kira.popover = (function($) {
	'use strict';

	/**
	 * Registering events
	 * @memberof kira.popover
	 * @private
	 */
	var _hidePopovers = function (e) {
		var triggerData = $(e.target).parent().data('bs.popover');
		if (triggerData != null) {
			// clicked a popover trigger
			$('.popover.in').not($(e.target).parent().data('bs.popover').$tip).popover('hide');
		} else {
			// clicked anywhere else
			$('.popover.in').popover('hide');
		}
	};

	/**
	 * Registering events
	 * @memberof kira.popover
	 * @private
	 */
	var _registerEvents = function() {
		$(document).on('click.kira.popover', _hidePopovers);
	};

	/**
	 * Initializing the module. Called on dom ready.
	 * @memberof kira.popover
	 * @private
	 */
	var _init = function() {
		_registerEvents();
	};

	/**
	 * Executed on DOM ready within the scope of this module.
	 * @event
	 */
	$(function() {
		_init();
	});


}(jQuery));