Bootstrap Popover - adapted behavior

by mjauerni

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div>
    <button type="button" class="btn btn-default" data-toggle="popover" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover</button>
</div>
<div style="margin-top:20px;">
    <button type="button" class="btn btn-default" data-toggle="popover" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover</button>
</div>

CSS

body { padding: 50px; }

JavaScript

/**
 * Setup for popover elements and their dismiss handling.
 * @param {jQuery object} $selector Selector for the target popovers.
 */
jQuery.setUpPopovers = function ($selector) {
    var $popovers = $selector ? $selector : $("[data-toggle='popover']");

    // create popover elements for the identified items
    $popovers.popover({
        toggle: "popover",
        html: true,
        container: "body"
    });

    // handle popover dismiss on click outside or the popover button itself
    $("body").click(function (e) {
        $popovers.each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(".popover").has(e.target).length === 0) {
                var popover = $(this).data("bs.popover");
                if (popover && popover.tip().hasClass("in")) {
                    $(this).popover("toggle");
                }
            }
        });
    });
}


$.setUpPopovers();