How can I hold Twitter Bootstrap Popover open until my mouse moves into it?

Solution 1:

With bootstrap (tested with version 2) I figured out the following code:

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(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');
            });

The main point is to override template with mouseleave() enabler. I hope this helps.

Solution 2:

Bootstrap 3 and above

Simple, just use the container option and have it as the element that is calling the popover. This way, the popover is a child of the element that calls it. Hence, you are technically still hovering over the parent, because the child popover belongs to it.

For example:

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

jQuery:

Running an $.each() loop over every one of my elements that I want a popover binded to its parent. In this case, each element has the class of pop.

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

CSS:

This part is optional, but recommended. It moves the popover down by 7 pixels for easier access.

.pop .popover {
    margin-top:7px;
}

WORKING DEMO

Solution 3:

Just to add to Marchello's example, if you want the popover to disappear if the user moves their mouse away from the popover and source link, try this out.

var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(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>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});

Solution 4:

This is a little hacky, but building off of marchello's example, I did this (no need for template):

$(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).on("mouseenter", function() {
  var _this = this;
  $(this).popover("show");
  $(this).siblings(".popover").on("mouseleave", function() {
    $(_this).popover('hide');
  });
}).on("mouseleave", function() {
  var _this = this;
  setTimeout(function() {
    if (!$(".popover:hover").length) {
      $(_this).popover("hide")
    }
  }, 100);
});

The setTimeout helps ensure that there's time to travel from the trigger link to the popover.

Solution 5:

This issue on the bootstrap github repo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.

HTML:

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>

CSS:

/*CSS */
.myClass{ position: relative;}

JS:

$(function(){
  $('.myClass').popover({placement: 'in top'});
});