Popover - test

by bhatnagar018

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<br />
<br />
<div class="paddd">
<a href="#" class="btn popover-link" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">
    Popover on right
</a>

    <br />
    <br />
<a href="#" class="btn popover-link" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">
    Popover on right
</a>

    <br />
    <br />
<a href="#" class="btn">
    <span class="popover-link" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">
    <i class="icon-pencil"></i>
    </span>
</a>

</div>

CSS

html, body {
    background: #EEF;
}
.paddd {
    padding-left:150px;
}

JavaScript

$('.popover-link').popover();

$(':not(#anything)').on('click', function (e) {
    $('.popover-link').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons and other elements 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');
            return;
        }
    });
});