bootstrap“tooltip”和“popover”在表格中添加額外的大小

Question

注意：
根據您的Bootstrap版本（3.3之前或之前），您可能需要不同的答案。
注意筆記。

當我激活工具提示（懸停在單元格上）或此代碼中的彈出窗口時，表的大小正在增加。 我怎么能避免這個？

這里emptyRow - 用100生成tr的函數

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

謝謝你的建議！

Answer 1

注意： 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工具提示文檔

Answer 2

注意： Bootstrap 3.0~3.2的解決方案

你需要在td創建一個元素並對它應用工具提示，就像這樣，因為工具提示本身就是一個div，當它放在td元素之后它會制動表格布局。

最新版本的Bootstrap引入了這個問題。 目前正在討論有關GitHub的修復程序。 希望下一個版本包含固定文件。

Answer 3

注意： 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>

這甚至適用於動態加載的內容。 例如在使用數據表

Answer 4

我想為接受的答案添加一些精確度，我決定使用答案格式來提高可讀性。

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

Answer 5

如果您使用數據表作為表，那么它將使用完整

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

                }
            });

Answer 6

您應該在數據表函數fnDrawCallback中初始化Tooltip

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

Answer 7

如果您正在為AngularJS使用bootstrap指令，請使用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”和“popover”在表格中添加額外的大小

問題描述

7 個解決方案

解決方案1
88 2015-02-13 07:59:17

簡單解決方案

為什么這樣做？

解決方案2
86 已采納 2012-11-07 12:31:38

解決方案3
16 2016-01-19 16:48:46

解決方案4
9 2013-03-18 15:55:01

解決方案5
1 2018-09-22 06:02:45

解決方案6
0 2016-07-23 12:46:46

解決方案7
0 2019-01-22 05:30:29

bootstrap“tooltip”和“popover”在表格中添加額外的大小

問題描述

7 個解決方案

解決方案1 88 2015-02-13 07:59:17

簡單解決方案

為什么這樣做？

解決方案2 86 已采納 2012-11-07 12:31:38

解決方案3 16 2016-01-19 16:48:46

解決方案4 9 2013-03-18 15:55:01

解決方案5 1 2018-09-22 06:02:45

解決方案6 0 2016-07-23 12:46:46

解決方案7 0 2019-01-22 05:30:29

解決方案1
88 2015-02-13 07:59:17

解決方案2
86 已采納 2012-11-07 12:31:38

解決方案3
16 2016-01-19 16:48:46

解決方案4
9 2013-03-18 15:55:01

解決方案5
1 2018-09-22 06:02:45

解決方案6
0 2016-07-23 12:46:46

解決方案7
0 2019-01-22 05:30:29