Customizing Twitter Bootstrap's popover behavior to open popovers on click, add close button, and keep popovers open until closed via close button or toggled via trigger link.

bootstrap_popover_customizations.md

Required scripts

Make sure jQuery and Bootstrap's Tootip and Popover plugins are included: http://getbootstrap.com/javascript/ http://getbootstrap.com/customize/

Then add the following...

Enable popovers

This script opens the popover when the trigger link is clicked and adds a "X" close button to the top of the popover. The popover can be closed by clicking the trigger link again or the close button. Multiple popovers can be open at the same time. Closing a popover only closes that popover and not the others.

jQuery(document).ready(function($) {
	$('.popover-link').each(function() {
		$(this).popover({
			html: true,
			trigger: 'manual'
		}).click(function(e) {
			$(this).popover('toggle');
			$('.close').remove();
			$('.popover-title').append('<button type="button" class="close">&times;</button>');
			$('.close').click(function(e){
				$(this).parents('.popover').remove();
			});
		});
	});	
});

The HTML

Pretty straightforward...see Bootstrap docs for more info: http://getbootstrap.com/javascript/#popovers

<div class="popover-container clearfix">
	<div id="popover1">
		<a class="popover-link" rel='popover' data-placement='top' data-original-title='Title goes here' data-content='&lt;p&gt;Here is some content in paragraph tags.&lt;/p&gt;'></a>
	</div>
	<div id="popover2">
		<a class="popover-link" rel='popover' data-placement='right' data-original-title='Another title here' data-content='&lt;b&gt;Here is some bold text&lt;/b&gt; in a popover.&lt;/p&gt;'></a>
	</div>
	<div id="popover3">
		<a class="popover-link" rel='popover' data-placement='bottom' data-original-title='Yet another title here' data-content='&lt;a&gt; href="#" Here is a link&lt;/a&gt; in a popover.'></a>
	</div>
</div>