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

70

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>
zkanoca
quelle

Antworten:

141

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/

Oueasley
quelle
3
Warum kann ich die Dokumentation dieses Bootstraps nicht sehen? Nett. Vielen Dank.
Zkanoca
Ich bin nicht sicher, ob es Teil von Bootstrap ist. Ich denke, es ist jQuery-spezifisch. Überprüfen Sie die Dokumentation.
Snollygolly
4
In dem Teil, der als QuickInfos in Schaltflächengruppen und Eingabegruppen gekennzeichnet ist, ist eine spezielle Einstellung erforderlich , in der Tabellen nicht ausdrücklich erwähnt werden. Wenn sich die QuickInfo jedoch überschneidet, kann sie ohne Interferenz angezeigt werden.
Oueasley
2
Dieser Fix funktioniert nicht für Inhalte, die dynamisch in die Seite eingefügt wurden.
Glen
In einer großen <TABELLE> mit Tooltip auf einigen <TR> hatte ich das gleiche Verschiebungsproblem, das meine Seite sehr langsam machte. Dank data-container = "body" wurde es behoben.
Matt Roy
5

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

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