Twitter Bootstrap Popovers - how to make them stay?

Question

RE: http://getbootstrap.com/javascript/#popovers

My popovers are triggered by hover event. When the popover appears, there are a couple of links I have put in the popovers that I'd like my users to have a chance to click. However, when the mouse pointer leaves the popover's hot spot and attempts to enter the popover area, the popover disappears.

Is there a way to make the popover stay?

Answer 1

You could set the container element of your popover to the element that triggered the popover.

Demo in fiddle

HTML :

<button type="button" class="btn btn-lg btn-danger popover-dismiss" 
        data-toggle="popover" title="Dismissible popover"
        data-content="And here's some amazing content. It's very engaging.">
    Dismissible popover
</button>

JavaScript :

$('.popover-dismiss').popover({
    trigger: 'hover',
    container: '.popover-dismiss'
})

CSS :

.popover-dismiss .popover {
    color: #333 ;
}

Unfortunately, you'll need to add CSS because in the example button CSS overrides popover CSS.

Answer 2

I dig the @holt answer, but also wanted to point out that there's a delay option for both show and hide:

$('.popover').popover({
    trigger: 'hover',
    delay: { hide: 3000 }
})