Custom bootstrap popover

by Gil Barbara

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<a href="#" title="Test: 1, 2, 3">Test</a>
<a href="#" title="Test: 4, 5, 6">Test 2</a>

CSS

a {
    margin: 50px;
    line-height: 8;
}

JavaScript

$('a').popover({
    container: 'body',
    html: true,
    template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    content: function () {
        $(this).attr('title', $(this).attr('data-original-title'));
        return $(this).text();
    },
    placement: 'auto right'
});