Bootstrap's tooltip moves table cells to right a bit on hover

css, html, javascript, jquery, twitter-bootstrap

Solution

You have to add the `data-container="body"` as per documentation.

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

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

Problem

I am using Bootstrap 3.1.1 for my project. Each cell in my table contains data like `000` or `111`. On hover, I want to display this data as a tooltip. So far, this works. However, when I hover over a `<td>`, all adjacent cells shift to the right. Here's my JSFiddle ``` <table class="table"> <thead> <tr> <th class="matrisHeader">   </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="">   </td> <td data-original-title="777" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="888" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="999" data-toggle="tooltip" data-placement="bottom" title="">   </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="">   </td> <td data-original-title="bbb" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="ccc" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="ddd" data-toggle="tooltip" data-placement="bottom" title="">   </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="">   </td> <td data-original-title="ggg" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="hhh" data-toggle="tooltip" data-placement="bottom" title="">   </td> <td data-original-title="iii" data-toggle="tooltip" data-placement="bottom" title="">   </td> </tr> </tbody> </table> ```

Original source