Bootstrap 弹出框仅适用于按钮 - 而不是锚点或跨度答案

【问题标题】：Bootstrap's popover only working on buttons - not anchors or spansBootstrap 弹出框仅适用于按钮 - 而不是锚点或跨度
【发布时间】：2014-07-30 16:59:50
【问题描述】：

我包括 tooltip.js 和 popover.js。

当我的标记看起来像这样时：

<button class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</button>

用JS

$('.popover-dismiss').popover({
  trigger: 'focus',
  html: 'true'
})

然后一切正常。但是，当我将button 更改为a 时，它会中断。控制台中没有错误。它只是根本不给出弹出窗口。

<a href="javascript://" class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</a>

完全相同的属性。只是一个锚而不是一个按钮。我也尝试过使用跨度，但这似乎也不起作用。

【问题讨论】：

我没有问题..codepen.io/pattmorter/pen/vueAm
嗯...这很奇怪。你让我更深入地研究它。在 Chrome 中，我的页面和您的笔都有一个工作按钮和一个损坏的链接。在 Firefox 中，我的页面和您的笔都有损坏的按钮和有效的链接...
确实很有趣...我正在使用 Firefox。
@Stanley 如果您通过 google 来到这里希望得到解决方案，请查看下面我的自我回答，如果它对您有用，请告诉我。
@ChrisSobolewski 它对我有用。谢谢！

标签： javascript twitter-bootstrap popover

【解决方案1】：

好吧，事实证明 Twitter Bootstrap 中有一个错误。它已经打开和关闭了几次。

目前有一个解决方法：

1) 初始化引导弹出框时不要使用trigger: focus
2) 改为使用data-trigger="focus" 作为将触发弹出窗口的项目的属性
3) 有弹出框的项目需要明确声明tabindex="-1"。

此处的跨浏览器工作示例：http://jsfiddle.net/v5L7m/3/

我也在一个真实的用例场景中证实了这一点。

编辑： @xanderiel 指出 tabindex=0 现在似乎会导致浏览器本机焦点边框，这是我最初的答案所要求的。他们说-1 的tabindex 消除了这个边界。

【讨论】：

只有严格遵守这三个建议才对我有用。非常感谢。
升级到 Bootstrap Nuget 包 > 3.2.0 后似乎至少不再需要 tabindex="0"
我必须额外添加href="#"，因为我的a 之前缺少一个。
在 bootstrap 3.3.5 中使用它
谢谢，Bootstrap 4 中仍然存在问题。必须执行上述所有操作才能修复它——很好的建议。 tabindex=-1 也适用于我——tabindex=0 在弹出框可见时在您的元素周围绘制丑陋的焦点边框。

【解决方案2】：

好吧，我想如果你想使用“焦点”作为触发器，你的元素必须是可聚焦的。设置 tabindex 会强制元素可聚焦，这就是为什么在设置 tabindex 时触发“焦点”开始工作的原因。

如果您不希望用户在点击 tab 键的元素上真正停下来，请考虑使用 -1 的 tabindex。

仅此而已。触发器：JS初始化时可以使用焦点。

【讨论】：

【解决方案3】：

不需要解决方法或任何东西。如果通过 JS 设置信息就可以了，下面是一个例子：

HTML：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

JS：

$(function() {
    $(document).popover({
        selector: '[data-toggle=popover]',
        trigger: 'focus'
    });
});

JSFiddle： https://jsfiddle.net/s02ykLo2/

【讨论】：

【解决方案4】：

尝试为popover() 呼叫设置container: 'body' 选项。

【讨论】：

设置 container: 'body' 没有帮助