Bootstrap popover dismiss

Bootstrap popover dismiss

by Keyur Patel

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 />
<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 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>

CSS

html, body {
    background: #EEF;
}

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;
        }
    });
});