使用引导程序的弹出框保持焦点答案

【问题标题】：Keeping the focus with bootstrap's popover使用引导程序的弹出框保持焦点
【发布时间】：2012-04-15 08:06:02
【问题描述】：

我一直在研究使用 Bootstrap 的 Popover 小部件，虽然我喜欢它的外观，但我希望看到的一件事是能够在 popover 的正文内容中放置超链接或按钮。实际上将它们放在那里，但问题是允许用户单击它们。

更具体地说，问题是 - 无论如何都是默认选项 - 一旦您离开链接并移向弹出框，它就会消失。除了拨打延迟{隐藏}设置之外，还有什么方法可以解决这个问题？在我看来，“正确”的解决方案是保持严格的“隐藏设置”（又名延迟：{hide:100}），但允许光标在弹出窗口上方移动以不启动计时器。

希望我在这里错过了一个简单的技巧。欢迎提供任何帮助。

【问题讨论】：

用例是：将鼠标悬停在链接上，弹出框显示链接的简短描述，描述中是“更多详细信息”的按钮。如果用户的兴趣仍然达到顶峰，他们可以将光标移动到弹出框并单击“更多详细信息”按钮。
请参阅stackoverflow.com/questions/7703878/…，了解您的用例的可能解决方案。
感谢乔恩，该线程非常相关

【解决方案1】：

下面的代码会在鼠标移过时显示弹出框，当鼠标移开时它会保持可见。

$("span[rel=popover]").popover({ trigger: 'manual' }).hover(function(e){ 
$(this).popover('show');
e.preventDefault(); 
});

关闭它调用

 $("span[rel=popover]").popover('hide');

HTH

【讨论】：

【解决方案2】：

游戏可能有点晚了，但我刚刚遇到了这个名为“click over”的弹出框变体。该解决方案可以满足您的需求，并且还有一些其他有用的方法。

【讨论】：

【解决方案3】：

我知道这是一个非常旧的链接，但为了其他人参考，我正在添加其他 stackoverflow 的链接 How can I keep bootstrap popover alive while the popover is being hovered?

【讨论】：