twitter bootstrap的工具提示问题

Question

我正在使用twitter bootstrap 3显示tooltip

<td class = "skills" data-toggle="tooltip" data-placement="left" data-original-title="<?php echo $row['skills']; ?>"><?php echo $row['skills']; ?></td>

它显示得很好,但是当我悬停在它上面时,它会将每个单元格移动到右边.

怎么解决这个问题？

我附上了两张快照,你可以看到它向右移动.

编辑

我在这里添加一个测试表,它做了什么,在下一个显示工具提示,td并td向右移动数据.

<table id="example-table" class="table table-striped table-hover table-condensed">
    <thead>
        <th>Serial</th>
        <th>Name</th>
        <th>Rating</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td>
          <td>php</td>
        </tr><tr>
          <td>2</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td>
          <td>C#</td>
        </tr>
      </tbody>
    </table>

这是 js

 <script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
 </script>

Answer 1

我找到了解决方案,只是发布在这里,以便有一天有人可能会发现这个有用.

所以,任何人如果遇到这个问题,我的意思是如果在使用时悬停和按钮上的数据移动时悬停twitter-bootstrap tooltip,你只需要执行以下操作:

<script type="text/javascript">
   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();   
   });
</script>

只需要添加容器(固定在bootstrap 2.3中)

<script type="text/javascript">
   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip({container: 'body'});   
   });
</script>