twitter-bootstrap - Twitter Bootstrap PopOver 仅适用于第一个触发器

Question

我一直在使用 Twitter Bootstrap 来构建网站的基本布局。我需要显示一个数据表，其中每个行项目都有一个数据属性，我希望将其显示为弹出窗口

如:

<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Content 1: this shows fine!" data-original-title="Title 1">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>
<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Doesn't show :(" data-original-title="Title 2">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>

看起来弹出窗口仅适用于列表中的第一个元素。看看这个jsfiddle:http://jsfiddle.net/stycu/

有谁知道这是设计使然还是错误？我已经检查了 github 上的问题，但看不到任何涉及它的内容。

提前致谢

Answer 1

$(function() {
    $("#test").popover();
});

您在调用中引用了 #test 的 id，并且每个元素的 id 必须是唯一的，因此仅显示第一个弹出窗口。

使用属性选择器来定位您的 rel 弹出框属性或类。

$(function() {
    $('[rel="popover"]').popover();
});

Demo