Подсказка Bootstrap перемещает ячейки таблицы вправо немного при наведении курсора

Я использую Bootstrap 3.1.1 для моего проекта. Каждая ячейка в моей таблице содержит такие данные, как 000 или 111. При наведении курсора Я хочу отобразить эти данные в виде подсказки. Пока это работает. Однако, когда я наведу курсор на <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>