bootstrap “підказка” та “popover” додають додатковий розмір у таблиці

Question 1

Примітка:
Залежно від вашої версії Bootstrap (до 3.3 чи ні), вам може знадобитися інша відповідь.
Зверніть увагу на примітки.

Коли я активую підказки (наведіть курсор на клітинку) або popovers у цьому коді, розмір таблиці збільшується. Як я можу цього уникнути?

Тут emptyRow - функція для створення tr зі 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>

дякую за пораду!

Question 2

Примітка: Рішення для Bootstrap 3.0 ~ 3.2

Вам потрібно створити елемент всередині tdі застосувати підказку до нього, як це , тому що сам по собі підказка є ДІВ, і коли він буде поміщений після tdелемента його розташування гальма таблиці.

Ця проблема з’явилася в останньому випуску Bootstrap. Тут тривають дискусії щодо виправлень на GitHub . Сподіваємось, наступна версія включає виправлені файли.

Question 3

Примітка: Рішення для Bootstrap 3.3+

Просте рішення

Під час .tooltip()дзвінка встановіть для containerпараметра body:

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

Ви також можете зробити те ж саме, використовуючи data-containerатрибут:

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

Чому це працює?

Це вирішує проблему, оскільки за замовчуванням підказка має display: blockі елемент вставляється туди, звідки його викликали. Внаслідокdisplay: block це в деяких випадках це впливає на потік сторінки, тобто штовхає інші елементи вниз.

Встановивши контейнер для елемента body, підказка додається до тіла замість того, звідки його викликали, тому це не впливає на інші елементи, оскільки немає чого "натискати".

Документація підказки Bootstrap

Question 4

Примітка: Рішення для Bootstrap 3.3+

Якщо ви хочете уникнути розбиття таблиці при застосуванні підказки до <td>елемента, ви можете використати такий код:

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

Ви html може виглядати так:

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

Це працює навіть із динамічно завантаженим вмістом. Наприклад, у використанні з таблицями даних

Question 5

Я хотів би додати певної точності прийнятій відповіді, я вирішив використовувати формат відповіді для читання.

Примітка: Рішення для Bootstrap 3.0 ~ 3.2

Зараз вирішення проблеми полягає в обгортанні підказки у div , але це потребує деяких модифікацій, якщо ви хочете, щоб весь <td>підказка відображалася (через CSS Bootstrap). Простий спосіб зробити це - перевести<td> прокладку в обгортку:

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 всередині DataTable функції fnDrawCallback

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

І визначте стовпець, як показано нижче

 {
      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

Якщо ви використовуєте таблицю даних для таблиці, вона буде використана повною

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

                }
            });

Question 8

Якщо ви використовуєте директиви завантаження для AngularJS, використовуйте атрибут tooltip-append-to-body.

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