Twitter bootstrap TwitterBootstrap PopOver仅在第一个触发器上起作用

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

例如：

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

二
三
二
三

不过，弹出窗口似乎只适用于列表中的第一个元素。请参阅此JSFIDLE：

有人知道这是设计的还是一个bug？我已经检查了github上的问题，但没有看到任何与之相关的内容

提前谢谢

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

您在通话中引用的id为

#test

，每个元素的id必须唯一，因此仅显示第一个popover

改为使用属性选择器以

rel

popover属性或类为目标

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

它只能与gem“twitter引导rails”一起使用

在application.js中

$(document).ready(function() {
  options = {
    trigger : 'hover'
  }
  $('[rel="popover"]').popover(options);
});

鉴于

<tr>
<td><a href ="#" rel="popover" data-content="Content 1: this shows fine!" data-original-title="Title 1" >Hover for popover</a>
</td>
</tr>

<tr>
<td><a href ="#" rel="popover" data-content="Doesn't show :(" data-original-title="Title 2">Hover for popover</a>
</td>
</tr>

通过打开此代码检查它是否正常工作