bootstrap popover - html -

<a href="#"
data-toggle="popover"
data-html="true"
data-content="<div><b>Popover Example</b> 1 - Content</div>"
title="Popover Example <b>1</b> - Title">Popover Example 1</a>
<br /><br />
<a href="#" id="popoverExampleTwo" >Popover Example 2</a>
<div id="popoverExampleTwoHiddenContent" style="display: none">
<div id="popoverExampleTwoHiddenTitle" style="display: none">
Popover Example <b>2</b> - Title
</div>
<div><b>Title Hidden Content</b> 2 - Content</div>
</div>
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#popoverExampleTwo").popover({
html : true,
content: function() {
return $('#popoverExampleTwoHiddenContent').html();
},
title: function() {
return $('#popoverExampleTwoHiddenTitle').html();
}
});
$('body').on('click', function (e) {
$('#popoverExampleTwo').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
});