Bootstrap的popover仅适用于按钮 - 而不是锚点或跨度 [英] Bootstrap's popover only working on buttons - not anchors or spans

问题描述

我包括tooltip.js和popover.js。

I am including tooltip.js and popover.js.

当我的标记看起来如此：

When my markup looks like so:

<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'
})

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

Then everything works fine. However, when I change my button to an a, it breaks. There are no errors in the console. It just simply does not give the popup.

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

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

The exact same attributes. Just an anchor instead of a button. I have also tried using a span and that does not appear to work either.

推荐答案

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

Ok so it turns out there is a bug in Twitter Bootstrap. It has been opened and closed a couple times.

目前有一种解决方法：

1）初始化引导弹出窗口时不使用 trigger：focus

2）而是使用 data-trigger =focus作为触发弹出窗口的项目的属性

3）有弹出框的项目需要 tabindex = - 1明确声明。

1) Do not use trigger: focus when initializing bootstrap popovers
2) Instead use data-trigger="focus" as an attribute to the items which will trigger the popover
3) Items which have a popover will need to have tabindex="-1" explicitly declared.

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

Cross-browser working example here: http://jsfiddle.net/v5L7m/3/

我还在实际用例场景中证实了这一点。

I have also confirmed this in a real-world use case scenario.

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

@xanderiel noted that tabindex=0 now appears to cause a browser native focus border which is what my original answer called for. They say a tabindex of -1 eliminates this border.

这篇关于Bootstrap的popover仅适用于按钮 - 而不是锚点或跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！