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

Question 1

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

Question 2

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.

Question 3

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

Question 4

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

Question 5

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

Question 6

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>";
    }
 },

Question 7

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

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

                }
            });

Question 8

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>

Answer 1

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

Answer 2

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

Answer 3

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

mishka

Answer 4

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

Rnk Jangir

Answer 5

@RonakJangir, zobacz odpowiedź poniżej

mishka

Answer 6

@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

Answer 7

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

Answer 8

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

Answer 9

5

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

Timm

Answer 10

1

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

twórców

Answer 11

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

Answer 12

3

Dzięki! Działał doskonale.

Amy Patterson

Answer 13

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

R. Pon

Answer 14

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

Answer 15

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

Answer 16

1

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

danymi

Answer 17

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

Answer 18

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

shock_gone_wild

Answer 19

@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

Answer 20

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

shock_gone_wild

Answer 21

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

Answer 22

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

Answer 23

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>";
    }
 },

Answer 24

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

Answer 25

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

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

                }
            });

Answer 26

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>

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

Odpowiedzi:

Proste rozwiązanie

Dlaczego to działa?