Question

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

我的弹出框由hover事件触发。当弹出窗口出现时，我在弹出窗口中放了几个链接，我希望我的用户有机会点击。但是，当鼠标指针离开弹出窗口的热点并尝试进入弹出区域时，弹出窗口消失。

有没有办法让popover停留？

Answer 1

您可以将弹出窗口的container元素设置为触发弹出窗口的元素。

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

不幸的是，您需要添加CSS，因为在示例中button CSS会覆盖popover CSS。

Answer 2

我挖掘了@holt的答案，但也想指出show和hide都有一个延迟选项：

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

Twitter Bootstrap Popovers - 如何让他们留下来？

2 个答案:

Demo in fiddle