Bootstrap 2.3.x popover with a few extra events and a close button.

gistfile1.txt

/*
	Extension of bootstrap-popover
		- adds a close button
		- if a title isn't initially present, the h3.popover-title element is removed; in can, however be readded via data('popoverextended').options.title
		- set once post-init: include an addClass option to add extra classes to the popover div
		- set once post-init: include a addCss option and pass an object in jquery's css format (e.g. "{ 'width': '550px' }") to have it applied to the popover div
*/
!function ($) {
	"use strict"; // jshint ;_;

 /* POPOVEREXTENDED PUBLIC CLASS DEFINITION
	* =============================== */

	var PopoverExtended = function (element, options) {
		this.init('popoverextended', element, options)

		var tip = this.tip();
		tip.find('.close').click($.proxy(function() { this.hide() }, this))
		if (this.getTitle() == '') tip.find('.popover-title').remove()
		if (typeof this.options.addClass != 'undefined') tip.addClass(this.options.addClass)
		if (typeof this.options.addCss != 'undefined' && this.options.addCss.constructor === Object) tip.css(this.options.addCss)
	}


	/* NOTE: POPOVEREXTENDED EXTENDS BOOTSTRAP-POPOVER.js
		 ========================================== */

	PopoverExtended.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
		constructor: PopoverExtended
	})


 /* POPOVEREXTENDED PLUGIN DEFINITION
	* ======================= */

	var old = $.fn.popoverextended

	$.fn.popoverextended = function (option) {
		return this.each(function () {
			var $this = $(this)
				, data = $this.data('popoverextended')
				, options = typeof option == 'object' && option
			if (!data) $this.data('popoverextended', (data = new PopoverExtended(this, options)))
			if (typeof option == 'string') data[option]()
		})
	}

	$.fn.popoverextended.Constructor = PopoverExtended

	$.fn.popoverextended.defaults = $.extend({} , $.fn.popover.defaults, {
		placement: 'right'
		, trigger: 'click'
		, content: ''
		, template: '<div class="popover"><div class="arrow"></div><button type="button" class="close">&times;</button><h3 class="popover-title"></h3><div class="popover-inner"><div class="popover-content"></div></div></div>'
	})


 /* POPOVEREXTENDED NO CONFLICT
	* =================== */

	$.fn.popoverextended.noConflict = function () {
		$.fn.popoverextended = old
		return this
	}
}(window.jQuery);