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 popover属性或类。

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

Demo

Answer 2

它可能只适用于gem“twitter-bootstrap-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>

将此代码放在http://jsfiddle.net/stycu/

上，检查它是否有效

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

2 个答案: