bootstrap "tooltip " и" popover " добавляют дополнительный размер в таблицу


Примечание:

В зависимости от версии Bootstrap (до версии 3.3 или нет) вам может потребоваться другой ответ.

Обратите внимание на заметки.




Когда я активирую всплывающие подсказки (наведите курсор на ячейку) или всплывающие окна в этом коде, размер таблицы увеличивается. Как мне этого избежать?



Здесь 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>


Спасибо за совет!

770   6  

6 ответов:

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

Вам нужно создать элемент внутри td и применить к нему подсказку, например this, потому что подсказка сама по себе является div, и когда она помещается после элемента td, она тормозит раскладку таблицы.

Эта проблема была введена с последним выпуском Bootstrap. Здесь ведутся постоянные дискуссии о исправлениях на GitHub. Надеюсь, следующая версия включает в себя исправленные файлы.

84  
2016-01-19 19:00:40

Примечание: решение для 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, всплывающая подсказка добавляется к телу вместо того, откуда она была вызвана, поэтому она не влияет на другие элементы, потому что нет ничего, что можно "нажать вниз".

82  
2016-01-19 19:01:03

Примечание: решение для 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>

Это даже работает с динамически загружаемым контентом. Например, при использовании с datatables

14  
2016-01-25 00:39:05

я хотел бы добавить некоторую точность к принятому ответу, я решил использовать формат ответа для удобства чтения.

Примечание: решение для Bootstrap 3.0 ~ 3.2

Прямо сейчас, обертывание подсказки в div-это решение , но оно потребует некоторых изменений, если вы хотите, чтобы вся ваша Подсказка <td> отображалась (из-за Bootstrap CSS). Простой способ сделать это-перенести заполнение <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'
    });
});
9  
2016-01-19 18:59:26

Вы должны инициализировать подсказку внутри функции 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>";
    }
 },
0  
2016-07-23 15:46:46

Если вы используете datatable для таблицы, то это будет использовать полный 

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

                }
            });
0  
2018-09-22 09:02:45

Comments

    Ничего не найдено.
Click here to cancel reply.