Bootstrap's弹出窗口只工作于按钮-不锚或跨度

Bootstrap's popover only working on buttons - not anchors or spans

本文关键字：按钮 于按钮 工作 窗口 Bootstrap      更新时间：2023-09-26

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

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

好了，原来Twitter Bootstrap有个bug。它已经被打开和关闭了几次。

目前有一个解决方案:

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

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

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

编辑: @xanderiel注意到tabindex=0现在似乎导致浏览器原生焦点边界，这是我最初的答案所要求的。他们说-1的tabindex可以消除这个边界

好吧，我想如果你想使用"focus"作为触发器，你的元素必须是可聚焦的。设置tabindex强制元素可聚焦，这就是为什么当tabindex设置后trigger "focus"开始工作。

如果你不希望用户在按tab键时停下来，可以考虑使用-1的tabindex。

这就是它的全部。触发器:focus可用于JS初始化

不需要变通或其他方法。如果你通过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/

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

相关文章：