bootstrap „tooltip” i „popover” dodają dodatkowy rozmiar w tabeli

82

Uwaga: w
zależności od wersji Bootstrap (wcześniejszej niż 3.3 lub nie) możesz potrzebować innej odpowiedzi.
Zwróć uwagę na notatki.

Kiedy aktywuję podpowiedzi (najeżdżam kursorem na komórkę) lub wyskakujące okienka w tym kodzie, rozmiar tabeli rośnie. Jak mogę tego uniknąć?

Tutaj emptyRow - funkcja generująca tr z wartością 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>

dziękuję za radę!

— mishka
źródło

Jaki dokładnie rozmiar masz na myśli? js generuje 100 komórek w jednym wierszu pod wstępnie zdefiniowanym pustym wierszem. Stworzyłem skrzypce

— Devellar

@Devellar, rozmiar zwiększa się po aktywowaniu podpowiedzi (najedź kursorem na komórkę)

— mishka

@MikhaillErofeev Mam również ten sam problem, jeśli go rozwiążesz, powiedz mi

— Rnk Jangir

@RonakJangir, zobacz odpowiedź poniżej

— mishka

@MikhaillErofeev Chcę tylko dodać podpowiedź do td, więc ta odpowiedź nie jest dla mnie przydatna. Rozwiązanie przesłało na twitter bootstrap, patrz github.com/twitter/bootstrap/issues/5980

— Rnk Jangir

90

Uwaga: Rozwiązanie dla Bootstrap 3.0 ~ 3.2

Musisz utworzyć element wewnątrz a tdi zastosować do niego podpowiedź, w ten sposób , ponieważ sama podpowiedź jest elementem div, a umieszczona za tdelementem hamuje układ tabeli.

Ten problem został wprowadzony w najnowszej wersji Bootstrap. Trwają dyskusje na temat poprawek w GitHub tutaj . Mam nadzieję, że następna wersja zawiera poprawione pliki.

— Devellar
źródło

57

Z linku GitHub: Rozwiązanie od wersji 2.3.x polega na ustawieniu opcji kontenera podpowiedzi / okna podręcznego na treść. Na przykład: $ (...). Tooltip ({container: 'body'}); Lub używając atrybutu data- * w HTML: data-container = "body"

— Domenic

5

@Domenic To powinna być odpowiedź, a następnie oznaczona jako poprawne rozwiązanie. Po prostu działa.

— Timm

1

dodaj to jako odpowiedź, dużo łatwiejszą dla przyszłych

— twórców

90

Uwaga: rozwiązanie dla Bootstrap 3.3+

Proste rozwiązanie

W .tooltip()rozmowie ustaw containeropcję body:

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

Alternatywnie możesz zrobić to samo, używając data-containeratrybutu:

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

Dlaczego to działa?

To rozwiązuje problem, ponieważ domyślnie etykietka ma display: blocki element jest wstawiany w miejscu, z którego został wywołany. Ze względu na display: blockto wpływa na przepływ strony w niektórych przypadkach, tj popychanie inne elementy w dół.

Po ustawieniu kontenera na element body, podpowiedź jest dołączana do treści zamiast skąd została wywołana, więc nie ma wpływu na inne elementy, ponieważ nie ma nic do „wciśnięcia”.

Dokumentacja podpowiedzi programu Bootstrap

— MrCode
źródło

3

Dzięki! Działał doskonale.

— Amy Patterson

Dzięki!! Opcja data-toggle = "podpowiedź" zadziałała, ale kontener nie działa: opcja 'body' ..

— R. Pon

— Wielkie

1

To nie działa, jeśli twoja tabela jest w trybie modalnym, ponieważ podpowiedź pojawia się gdzieś na stronie (prawdopodobnie nadal jej nie znalazłem). Caveat Emptor. Zaakceptowana odpowiedź nadal działa, po prostu zawiń zawartość td w div i zastosuj do tego etykietkę.

— Hippyjim

17

Uwaga: rozwiązanie dla Bootstrap 3.3+

Jeśli chcesz uniknąć rozbicia tabeli podczas stosowania podpowiedzi do <td>elementu, możesz użyć następującego kodu:

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

Możesz wyglądać html tak:

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

Działa to nawet z dynamicznie ładowaną zawartością. Na przykład w użyciu z danymi

— shock_gone_wild
źródło

1

Dziękuję Ci! W końcu mogę używać podpowiedzi z

— danymi

9

Chciałbym doprecyzować zaakceptowaną odpowiedź, zdecydowałem się użyć formatu odpowiedzi dla czytelności.

Uwaga: Rozwiązanie dla Bootstrap 3.0 ~ 3.2

W tej chwili rozwiązaniem jest zawinięcie podpowiedzi w element div , ale będzie to wymagało pewnych modyfikacji, jeśli chcesz, aby cała <td>etykieta wyświetlała się (z powodu Bootstrap CSS). Prostym sposobem na to jest przeniesienie <td>wyściółki do opakowania:

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
źródło

jeśli chcesz, aby całe <td> wyświetlało podpowiedź, po prostu zastosuj podpowiedź bezpośrednio do elementu td

— shock_gone_wild

@shock_gone_wild Nie o to chodzi. Zastosowanie podpowiedzi do dowolnego <td>elementu spowoduje rozbicie całej tabeli, jak stwierdzono w pierwotnym pytaniu, i każdej odpowiedzi. Dlatego wszyscy zdecydowaliśmy się dodać do niego kolejny element. To powiedziawszy, nie znam nowości w Bootstrap 4 i ten błąd mógł zostać naprawiony.

— zessx

nie, nie zepsuje tabeli, jeśli dodasz kontener: 'body'. Zobacz moją odpowiedź tutaj. stackoverflow.com/a/34882401/3927116

— shock_gone_wild

1

containerZostał wprowadzony w 2014 roku, 2 lata po tym pytaniu. Dzięki za komentarz, wprowadzę kilka zmian, aby oświetlić tę opcję i sprecyzować, że ten błąd nie jest związany z najnowszymi wersjami Bootstrap.

— zessx

1

Właśnie to dodałem, ponieważ bardzo pozytywna odpowiedź już używa opcji kontenera. A dla przyszłych czytelników ta informacja może być bardzo przydatna;)

— shock_gone_wild

1

Tooltip należy zainicjować wewnątrz funkcji datatable fnDrawCallback

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

I zdefiniuj swoją kolumnę jak poniżej

 {
      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
źródło

Głosuj za część fnDrawCallback i jest to jedyne miejsce, w którym inicjalizacja podpowiedzi BS z formatowaniem HTML działa z plikiem datatable, który ma włączone stronicowanie.

— Drew

1

Jeśli używasz datatable dla tabeli, będzie ona pełna

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

                }
            });

— Rajdip Khavad
źródło

0

Jeśli używasz dyrektyw bootstrap dla AngularJS, użyj atrybutu tooltip-append-to-body.

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

— Haider Abbas
źródło