83

注意：
根据您的 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>

谢谢指教！

4

7 回答 7

93

注意： 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 元素，工具提示被附加到 body 而不是从它被调用的位置，因此它不会影响其他元素，因为没有什么可以“下推”。

于 2015-02-13T07:59:17.627 回答
91

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

您需要在 a 中创建一个元素td并对其应用工具提示，就像这样，因为工具提示本身就是一个 div，当它放在td元素之后时，它会破坏表格布局。

这个问题是在最新版本的 Bootstrap 中引入的。在GitHub 上有关于修复的持续讨论。希望下一个版本包含固定文件。

于 2012-11-07T12:31:38.243 回答
17

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

这甚至适用于动态加载的内容。例如与数据表一起使用

于 2016-01-19T16:48:46.713 回答
9

我想为接受的答案增加一些精度，我决定使用答案格式以提高可读性。

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

现在，将工具提示包装在 div 中是解决方案，但如果您希望整体<td>显示工具提示（由于 Bootstrap CSS），则需要进行一些修改。一种简单的方法是将其<td>填充转移到 wrapper ：

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'
    });
});
于 2013-03-18T15:55:01.547 回答
3

如果您对表使用数据表，那么它将使用完整的

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

                }
            });
于 2018-09-22T06:02:45.180 回答
1

您应该在数据表函数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>";
    }
 },
于 2016-07-23T12:46:46.117 回答
0

如果您使用 AngularJS 的引导指令，请使用 tooltip-append-to-body 属性。

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
于 2019-01-22T05:30:29.187 回答