Der Tooltip von Bootstrap verschiebt die Tabellenzellen beim Hover etwas nach rechts

Ich verwende Bootstrap 3.1.1 für mein Projekt. Jede Zelle in meiner Tabelle enthält Daten wie 000oder 111. Beim Hover möchte ich diese Daten als Tooltip anzeigen. Bisher funktioniert das. Wenn ich jedoch über a schwebe <td>, verschieben sich alle benachbarten Zellen nach rechts.

Hier ist meine 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>

Sie müssen die data-container="body"gemäß Dokumentation hinzufügen .

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

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

Sie können den "Datencontainer" folgendermaßen einstellen:

// initalize boostrap tooltip
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            container: 'body'
        })
    })