Holding a bootstrap popover open until the mouse enters the popover element. Adapted from StackOverflow answer to "How can I hold Twitter Bootstrap Popover open until my mouse moves into it?" (http://stackoverflow.com/a/9400740)

bootstrap-persist-hover.js

$(function () {
    $("[rel=popover]")
        .popover({
            delay: 500,
            offset: 10,
            trigger: 'manual',
            animate: false,
            html: true,
            template: '<div class="popover" onmouseover="clearTimeout($(this).data(\'hideTimeout\'));$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

        }).click(function (e) {
            e.preventDefault();
        }).mouseenter(function (e) {
            $(this).popover('show');
        }).mouseleave(function (e) {
            var elem = $(this);
            //Give the user 150ms to move mouse from triggering element to popover tip
            var hideTimeout = setTimeout(function () {
                    elem.popover('hide');
                }, 150);
            $($(this).data('popover').$tip).data('hideTimeout', hideTimeout);
        });
});