Twitter bootstrap 2.3.2 popover stay open while hovering

Question

I have a bottom-oriented popover that I'd like to be a bit more forgiving than the default popover, which vanishes as soon as the mouse leaves the trigger.

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});

I've got it to stay open as long as the mouse is over the trigger or the popover content, but that's tough for the user, since they've got to mouse from the trigger element to the arrow to the content without leaving those areas in order to interact with the popover. Two solutions in mind, neither is working:

1) the delay option ought to do this. adding delay: {hide: 500} to the popover call leaves the popover open after the mouse leaves, but re-entering the trigger elem or the popover before it disappears does not tell bootstrap to keep the popover open, so goes away at the end of the initial timeout.

2) widen the arrow's containing element so that the mouse going from trigger element to background between trigger element and popover to popover works (the mouse then would never have left the trigger/element). The following works except the arrow is drawn with overlapping CSS borders, so the background is not transparent: http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

The workaround is to hard-wire the mouseover and mouseleave events with jquery, or to replace the overlapping-borders arrow with an image. Better fixes?

Answer 1

I have a more generic approach to solving this one, which I'm using myself. It involves overloading the popover's hide function, checking if the associated tooltip is being hovered over, and reacts appropriately - rather than adding all that event handling & html5 data setting.

(function($) {

    var oldHide = $.fn.popover.Constructor.prototype.hide;

    $.fn.popover.Constructor.prototype.hide = function() {
        if (this.options.trigger === "hover" && this.tip().is(":hover")) {
            var that = this;
            // try again after what would have been the delay
            setTimeout(function() {
                return that.hide.call(that, arguments);
            }, that.options.delay.hide);
            return;
        }
        oldHide.call(this, arguments);
    };

})(jQuery);

Load this after your bootstrap & jQuery sources.