it-swarm.com.de

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

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 (mit der Maus über die Zelle) oder Popovers in diesem Code aktiviere, nimmt die Tabellengröße zu. Wie kann ich das vermeiden?

Hier eine emptyRow - Funktion, um tr mit 100 zu erzeugen

<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!

77
Mishka

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

Sie müssen ein Element innerhalb einer td erstellen und einen Tooltip darauf anwenden, z. B. this , da ein Tooltip selbst ein div ist und wenn er nach einem td-Element platziert wird, das Tabellenlayout abgebremst wird.

Dieses Problem wurde mit der neuesten Version von Bootstrap eingeführt. Auf GitHub wird hier laufend über Fixes diskutiert. Hoffentlich enthält die nächste Version die festen Dateien.

86
Devellar

Hinweis: Lösung für Bootstrap 3.3+

Einfache Lösung

Setzen Sie im Aufruf von .tooltip() die Option container auf body:

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

Alternativ können Sie dasselbe tun, indem Sie das data-container-Attribut 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 die QuickInfo standardmäßig display: block enthält und das Element an der Stelle eingefügt wird, von der es aufgerufen wurde. Aufgrund des display: block beeinflusst dies in einigen Fällen den Seitenfluss, d. H. Das Drücken anderer Elemente.

Wenn Sie den Container auf das body-Element setzen, wird der Tooltip an den Body angehängt und nicht an den Ort, von dem aus er aufgerufen wurde. Dies wirkt sich nicht auf andere Elemente aus, da nichts "nach unten drücken" ist.

88
MrCode

Hinweis: Lösung für Bootstrap 3.3+

Wenn Sie vermeiden möchten, dass die Tabelle beim Anwenden einer QuickInfo auf ein <td>-Element beschädigt wird, 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 bei dynamisch geladenen Inhalten. Zum Beispiel mit datatables

14
shock_gone_wild

Ich möchte die akzeptierte Antwort etwas präziser machen, ich entschied mich für das Antwortformat zur besseren Lesbarkeit.

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

Im Moment ist das Einbetten Ihres Tooltips in ein div ist die Lösung , aber es bedarf einiger Änderungen, wenn der gesamte <td> den Tooltip anzeigen soll (aufgrund von Bootstrap-CSS). Ein einfacher Weg, dies zu tun, ist das Übertragen von <td> in den Wrapper:

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'
    });
});
9
zessx

Wenn Sie datable for table verwenden, wird es voll verwendet

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

                }
            });
1
Rajdip Khavad

Wenn Sie Bootstrap-Anweisungen für AngularJS verwenden, verwenden Sie das Attribut tooltip-append-to-body.

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

Sie sollten Tooltip innerhalb 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 Kolumne 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>";
    }
 },
0
Nikunj Patel