CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-3
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

Twitter Bootstrap Popovers - how to make them stay?

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?

Upvotes: 0

Views: 176

Answers (2)

jme11
jme11

Reputation: 17374

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 }
})

Upvotes: 1

Holt
Holt

Reputation: 37606

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.

Upvotes: 2

Related Questions