Question

升级到bootstrap 3后，在表行上生成弹出窗口会对表行产生意外的悬停效果。弹出窗口在使用表条纹样式的表行上行为不正确。删除表条纹样式是一个修复，但你失去了这种效果。仅在Chrome中测试过。最后一个工作版本是2.1.1。

Bootstrap 2.2.2：http://jsfiddle.net/tomshaw/9N4fs/

有没有办法给popover一个容器来阻止这种效果？还是一些类似的技术？

<table class="table table-striped">
  <thead>
    <tr>
      <th>Module</th>
      <th>Controller</th>
      <th>Action</th>
      <th>Recorded</th>
    </tr>
  </thead>
  <tbody>
    <tr id="popover" data-content="Content One" title="System Information">
      <td>Utilities</td>
      <td>Transaction</td>
      <td>Export</td>
      <td>2012-12-26 11:58:10</td>
    </tr>
    <tr id="popover" data-content="Content Two" title="System Information">
      <td>Utilities</td>
      <td>Reports</td>
      <td>Edit</td>
      <td>2012-12-26 12:47:30</td>
    </tr>
    <tr id="popover" data-content="Content Three" title="System Information">
      <td>Utilities</td>
      <td>User</td>
      <td>Edit</td>
      <td>2012-12-26 12:48:27</td>
    </tr>
  </tbody>
</table>


// Weird table row table-striped hover effect. Broken in bootstrap 
// 2.2.2 working in 2.1.1 Using selector option has same effect.

$('body').popover({placement:"top",trigger:"hover",selector:'tr[id=popover]'});


table {
    margin:50px 5px 0 5px;   
}

Answer 1

我不确定你的行为是什么。当我删除表条带时，弹出窗口的行为完全相同。您还在tr中使用具有相同名称的多重ID标记。我更新了你的例子以修复其中的一些内容，然后将弹出窗口重新排列到我认为你想要它的区域。如果有帮助请告诉我，请记住不要使用同名的多个ID。

以下是我移动popover的方法：

添加了：

.popover{
    left: 0px !important;
}

这是一个工作小提琴，请确保您查看HTML和JS中的更改：

http://jsfiddle.net/9N4fs/30/

弹出窗口使用表条纹样式在表行上无法正常工作

1 个答案: