Manipulate the Bootstrap popover with data properties

popover.css

[data-style=help-popover] + .popover {
	margin-left:-20px;
}

popover.html

<div class="helper" id="helper" rel="popover" data-style="help-popover" data-placement="bottom" data-content="Hover over progress indicators for details, and to view the status of each section." data-original-title="See your progress!"></div>

popover.js

// Destroy the popover when anything is clicked
$('html').on('mouseup', function(e) {
	if(!$(e.target).closest('.popover').length) {
		$('.popover').each(function(){
			$(this.previousSibling).popover('hide');
		});
	}
});

// Destroy the popover when another is shown
$('body').popover({
	selector: '[rel=popover]',
	trigger: "hover"
}).on("show.bs.popover", function(e){
	$("[rel=popover]").not(e.target).popover("destroy");
	$(".popover").remove();
});