Bootstrap的popover仅适用于按钮 - 而不是锚点或跨度

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)trigger: focus初始化引导弹出窗口时不要使用
2)而是使用data-trigger="focus"将触发弹出窗口的项目作为属性
3)具有弹出窗口的项目需要tabindex="-1"显式声明.

这里的跨浏览器工作示例:http://jsfiddle.net/v5L7m/3/

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

编辑: @xanderiel指出,tabindex=0现在似乎导致浏览器原生焦点边框,这是我原来的答案所要求的.他们说-1消除了这个边界的tabindex .

Answer 2

好吧,我想如果你想使用"焦点"作为触发器,你的元素必须是可聚焦的.设置tabindex会强制元素成为焦点,这就是设置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/