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

Question

I have a link that uses the Twitter Bootstrap Popover version 1.3.0 to show some information. This information includes a link, but every-time I move my mouse from the link

Answer 1

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:

This has a popover
This has a popover
This has a popover

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