Twitter Bootstrap Popovers - 如何让它们留下来？答案

【问题标题】：Twitter Bootstrap Popovers - how to make them stay?Twitter Bootstrap Popovers - 如何让它们留下来？
【发布时间】：2014-07-09 13:19:20
【问题描述】：

回复：http://getbootstrap.com/javascript/#popovers

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

有没有办法让弹出框保持不变？

【问题讨论】：

能贴出相关的HTML/JS吗？

标签： javascript css twitter-bootstrap twitter-bootstrap-3

【解决方案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。

【讨论】：

聪明。我相信有一天我会找到它的用途。 +1

【解决方案2】：

我挖掘了@holt 的答案，但也想指出显示和隐藏都有延迟选项：

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

【讨论】：