Bootstrap的工具提示将表格单元格移动到hover状态

我正在为我的项目使用Bootstrap 3.1.1。 我的表格中的每个单元格都包含像000或111这样的数据。 hover时，我想将这些数据显示为工具提示。 到目前为止，这工作。 但是，当我将鼠标hover在<td> ，所有相邻的单元格都向右移动。

这是我的JSFiddle

 <table class="table"> <thead> <tr> <th class="matrisHeader"> &nbsp; </th> <th data-original-title="111" data-toggle="tooltip" data-placement="bottom" title=""> PÇ1 </th> <th data-original-title="222" data-toggle="tooltip" data-placement="bottom" title=""> PÇ2 </th> <th data-original-title="333" data-toggle="tooltip" data-placement="bottom" title=""> PÇ3 </th> <th data-original-title="444" data-toggle="tooltip" data-placement="bottom"title=""> PÇ4 </th> </tr> </thead> <tbody> <tr> <th data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""> ÖÇ1 </th> <td data-original-title="666" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="777" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="888" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="999" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> </tr> <tr> <th data-original-title="000" data-toggle="tooltip" data-placement="bottom" title=""> ÖÇ2 </th> <td data-original-title="aaa" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="bbb" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="ccc" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="ddd" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> </tr> <tr> <th data-original-title="eee" data-toggle="tooltip" data-placement="bottom" title=""> ÖÇ3 </th> <td data-original-title="fff" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="ggg" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="hhh" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> <td data-original-title="iii" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> </tr> </tbody> </table> 

Answer 1

您必须按照文档添加data-container="body" 。

 <td data-original-title="999" data-container="body" data-toggle="tooltip" data-placement="bottom" title=""> &nbsp; </td> 

http://jsfiddle.net/uEqF2/2/