Question

我包括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>

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

Answer 1

好的，所以事实证明Twitter Bootstrap中存在一个错误。它已被打开和关闭几次。

目前有一项解决方法：

1）初始化bootstrap popovers时不要使用trigger: focus 2）而是使用data-trigger="focus"作为触发弹出窗口的项目的属性 3）具有弹出窗口的项目需要明确声明tabindex="-1"。

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

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

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

Answer 2

嗯，我想如果你想使用＆＃34;焦点＆＃34;作为触发器，您的元素必须是可聚焦的。设置tabindex会强制元素成为焦点，这就是为什么触发＆＃34;焦点＆＃34;设置tabindex时开始工作。

如果您不希望用户实际停止点击Tab键的元素，请考虑使用-1的tabindex。

这就是它的全部内容。触发：焦点可用于JS初始化。

Answer 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/

Answer 4

尝试为container: 'body'电话设置popover()选项。

Bootstrap的弹出窗口只能处理按钮 - 而不是锚点或跨度

4 个答案: