Bootstrap 3.0 Popover Sample

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="tree">
    <div class="html-popup"> Popup text <a href="http://www.google.com" target="_blank">Link somewhere</a>
    </div>
<a tabindex="0" role="button" data-container="body" data-toggle="popover" data-placement="bottom">
Text that has a popover</a>
    <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-placement="bottom">
Another popover</a>
</div>

CSS

.html-popup {
    display: none;
}

JavaScript

$('.tree [data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return $(".html-popup").html();
    }
}).on('show.bs.popover', function() {
    $('[data-toggle="popover"]').popover('hide');
});

$('html').on('click', function (e) {
    if ($(e.target).data('toggle') !== 'popover') { 
        $('[data-toggle="popover"]').popover('hide');
    }
});