Bootstrap "Tooltip" und "Popover" fügen zusätzliche Größe in der Tabelle

82

Hinweis:
Abhängig von Ihrer Bootstrap-Version (vor 3.3 oder nicht) benötigen Sie möglicherweise eine andere Antwort.
Beachten Sie die Hinweise.

Wenn ich QuickInfos (Bewegen Sie den Mauszeiger über die Zelle) oder Popover in diesem Code aktiviere, nimmt die Größe der Tabelle zu. Wie kann ich das vermeiden?

Hier emptyRow - Funktion zum Generieren von tr mit 100 

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
    <style>    
    #matrix td {
        width: 10px;
        height: 10px;
        border: 1px solid gray; 
        padding: 0px; 
    }
    </style>
<script>
function emptyRow() {
        str = '<tr>'
        for (j = 0; j < 100; j++) {
            str += '<td rel="tooltip" data-original-title="text"></td>'
        }
        str += '</tr>'
        return str
    }
    $(document).ready(function () {
        $("#matrix tr:last").after(emptyRow())
        $("[rel=tooltip]").tooltip();
    });
    </script>
</head>
<body style="margin-top: 40px;">
<table id="matrix">
    <tr>
    </tr>
</table>
</body>
</html>

danke im Rat!

javascript twitter-bootstrap twitter-bootstrap-3 tooltip Mischka
quelle
Was genau meinst du mit Übergröße? js generiert 100 Zellen in einer Zeile unter der vordefinierten leeren Zeile. Ich habe eine Geige erstellt
Devellar
@ Devellar, Größe erhöht sich beim Aktivieren des Tooltips (schweben Sie über der Zelle)
Mischka
@ MikhaillErofeev Ich habe auch das gleiche Problem, Wenn Sie es lösen, sagen Sie mir bitte
Rnk Jangir
@ RonakJangir, siehe Antwort unten
Mischka
@MikhaillErofeev Ich möchte nur einen Tooltip zu td hinzufügen, daher ist diese Antwort für mich nicht nützlich. Bis die Lösung auf Twitter Bootstrap eingereicht hat, siehe github.com/twitter/bootstrap/issues/5980
Rnk Jangir

Antworten:

90

Hinweis: Lösung für Bootstrap 3.0 ~ 3.2

Sie benötigen ein Element innerhalb eines zu erstellen tdund anzuwenden ein Tooltip , um es, wie dies , weil ein Tooltip selbst ein div ist, und wenn es nach einem platziert tdElement bremst Tabellenlayout.

Dieses Problem wurde mit der neuesten Version von Bootstrap eingeführt. Hier gibt es laufende Diskussionen über Korrekturen auf GitHub . Hoffentlich enthält die nächste Version die festen Dateien.

Devellar
quelle
57
Über den GitHub-Link: Die Lösung ab Version 2.3.x besteht darin, die Containeroption des Tooltips / Popovers auf body zu setzen. Zum Beispiel: $ (...). Tooltip ({container: 'body'}); Oder verwenden Sie ein data- * Attribut im HTML: data-container = "body"
Domenic
5
@Domenic Dies sollte eine Antwort sein und dann als die richtige Lösung markiert werden. Funktioniert einfach.
Timm
1
Bitte fügen Sie dies als Antwort hinzu, viel einfacher für zukünftige Entwickler
cmario
89

Hinweis: Lösung für Bootstrap 3.3+

Einfache Lösung

Im .tooltip()Aufruf, setzen Sie die containerOption auf body:

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

Alternativ können Sie dasselbe tun, indem Sie das data-containerAttribut verwenden:

<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>

Warum funktioniert das?

Dies löst das Problem, da standardmäßig der Tooltip vorhanden ist display: blockund das Element an der Stelle eingefügt wird, von der aus es aufgerufen wurde. Aufgrund display: blockdessen wirkt sich dies in einigen Fällen auf den Seitenfluss aus, dh es werden andere Elemente nach unten gedrückt.

Wenn Sie den Container auf das body-Element setzen, wird der Tooltip an den body angehängt, anstatt an den Ort, von dem aus er aufgerufen wurde, sodass andere Elemente nicht betroffen sind, da nichts "heruntergedrückt" werden muss.

MrCode
quelle
3
Vielen Dank! Hat perfekt funktioniert.
Amy Patterson
Vielen Dank!! Die Option data-toggle = "tooltip" hat funktioniert, aber nicht die Option container: 'body'.
R. Mo
Vielen Dank, das hat meine Stunden gerettet :)
Viky293
1
Dies funktioniert nicht, wenn sich Ihre Tabelle in einem Modal befindet, da der Tooltip irgendwo auf der Seite angezeigt wird (wahrscheinlich habe ich ihn immer noch nicht gefunden). Vorbehalt Emptor. Die akzeptierte Antwort funktioniert jedoch weiterhin. Wickeln Sie einfach Ihren td-Inhalt in ein div und wenden Sie den Tooltip darauf an.
Hippyjim
17

Hinweis: Lösung für Bootstrap 3.3+

Wenn Sie vermeiden möchten, die Tabelle beim Anwenden eines Tooltips auf ein <td>Element zu beschädigen , können Sie den folgenden Code verwenden:

    $(function () {
        $("body").tooltip({
            selector: '[data-toggle="tooltip"]',
            container: 'body'
        });
    })

Ihr HTML könnte so aussehen:

<td data-toggle="tooltip" title="Your tooltip data">
    Table Cell Content
</td>

Dies funktioniert sogar mit dynamisch geladenen Inhalten. Zum Beispiel bei Verwendung mit Datentabellen

schock_gone_wild
quelle
1
Danke dir! Ich kann endlich Tooltip mit
Datentabellen verwenden
9

Ich möchte der akzeptierten Antwort etwas Präzision verleihen. Ich habe mich aus Gründen der Lesbarkeit für das Antwortformat entschieden.

Hinweis: Lösung für Bootstrap 3.0 ~ 3.2

Im Moment ist es die Lösung , Ihren Tooltip in ein div zu packen. Es sind jedoch einige Änderungen erforderlich, wenn Ihr gesamtes <td>Tooltip angezeigt werden soll (aufgrund von Bootstrap-CSS). Eine einfache Möglichkeit besteht darin, <td>die Polsterung auf den Wrapper zu übertragen:

HTML

<table class="table table-hover table-bordered table-striped">
    <tr>
        <td>
            <div class="show-tooltip" title="Tooltip content">Cell content</div>
        </td>
    </tr>
</table>

JS (jQuery)

$('.show-tooltip').each(function(e) {
    var p = $(this).parent();
    if(p.is('td')) {
        /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */
        $(this).css('padding', p.css('padding'));
        p.css('padding', '0 0');
    }
    $(this).tooltip({
        toggle: 'toolip',
        placement: 'bottom'
    });
});
Zessx
quelle
Wenn Sie möchten, dass das gesamte <td> den Tooltip
anzeigt
@shock_gone_wild Das ist nicht der Punkt. Durch Anwenden eines Tooltips auf ein <td>Element wird die gesamte Tabelle, wie in der ursprünglichen Frage angegeben, und jede Antwort beschädigt. Deshalb haben wir uns alle dafür entschieden, ein weiteres Element hinzuzufügen. Trotzdem sind mir die Bootstrap 4-Neuheiten nicht bekannt, und dieser Fehler wurde möglicherweise behoben.
Zessx
Nein, es wird die Tabelle nicht beschädigen, wenn Sie den Container 'body' hinzufügen. Siehe meine Antwort hier. stackoverflow.com/a/34882401/3927116
schock_gone_wild
1
Das containerwurde 2014 eingeführt, 2 Jahre nach dieser Frage. Vielen Dank für Ihren Kommentar. Ich werde einige Änderungen vornehmen, um diese Option zu aktivieren und sicherzustellen, dass dieser Fehler nicht mit den neuesten Versionen von Bootstrap zusammenhängt.
Zessx
1
Ich habe dies gerade hinzugefügt, da eine hoch bewertete Antwort bereits die Container-Option verwendet. Und für zukünftige Leser könnten diese Informationen sehr nützlich sein;)
schock_gone_wild
1

Sie sollten Tooltip in der datierbaren Funktion fnDrawCallback initialisieren

"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },

Und definieren Sie Ihre Spalte wie folgt

 {
      targets: 2,
      'render': function (data, type, full, meta) {
       var htmlBuilder = "<b>" + data + "</b><hr/><p>Description: <br/>" + full["longDescrioption"] + "</p>";
      return "<a href='#' class='Name'>" + (data.length > 50 ? data.substr(0, 50) + '…' : data) + "</a>" +
      "<sup data-toggle='tooltip' data-original-title=" + htmlBuilder + ">"+
      "<i class='ic-open-in-new ic' style='font-size:12px;margintop:-3px;'></i></sup>";
    }
 },
Nikunj Patel
quelle
Upvote für den Teil fnDrawCallback und ist der einzige Ort, an dem das Initialisieren eines BS-Tooltips mit HTML-Formatierung mit einer Datentabelle funktioniert, für die Paging aktiviert ist.
Drew
1

Wenn Sie datatable for table verwenden, wird es full verwendet

$('#TableId').DataTable({
                "drawCallback": function (settings) {
                    debugger;
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    });

                }
            });
Rajdip Khavad
quelle
0

Wenn Sie Bootstrap-Anweisungen für AngularJS verwenden, verwenden Sie das Tooltip-Append-to-Body-Attribut.

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
Haider Abbas
quelle