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

Question

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">                 &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

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/