引导“工具提示”和“弹出框”在表格中添加额外的大小答案

【问题标题】：bootstrap "tooltip" and "popover" add extra size in table引导“工具提示”和“弹出框”在表格中添加额外的大小
【发布时间】：2012-11-07 11:01:45
【问题描述】：

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

感谢您的建议！

【问题讨论】：

额外尺寸到底是什么意思？ js 在预定义的空行下的一行中生成 100 个单元格。我创建了一个fiddle
@Devellar，激活工具提示时大小增加（悬停在单元格上）
@MikhaillErofeev 我也有同样的问题，如果你解决了请告诉我
@RonakJangir，请参阅下面的答案
@MikhaillErofeev 我只想在 td 上添加工具提示，所以这个答案对我没有用。通过该解决方案已提交到 twitter bootstrap，请参阅 github.com/twitter/bootstrap/issues/5980

标签： javascript twitter-bootstrap twitter-bootstrap-3 tooltip

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

Bootstrap Tooltips Documentation

【讨论】：

谢谢！完美运行。
谢谢！！ data-toggle="tooltip" 选项有效，但容器无效：'body' 选项..
非常感谢，这节省了我的时间 :)
如果您的表格处于模式中，这将不起作用，因为工具提示出现在页面的某处（可能我还没有找到它）。买者自负。接受的答案仍然有效，只需将您的 td 内容包装在 div 中并将工具提示应用于该内容。

【解决方案2】：

注意： Bootstrap 3.0 ~ 3.2解决方案

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

此问题是在最新版本的 Bootstrap 中引入的。在GitHub here 上正在进行有关修复的讨论。希望下一个版本包含固定文件。

【讨论】：

来自 GitHub 链接：从 v2.3.x 开始的解决方案是将 tooltip/popover 的容器选项设置为 body。例如：$(...).tooltip({container: 'body'});或者在 HTML 中使用 data-* 属性：data-container="body"
@Domenic 这应该是一个答案，然后标记为正确的解决方案。只是工作。
请将此添加为答案，对未来的开发人员来说更容易

【解决方案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>

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

【讨论】：

谢谢！我终于可以在数据表中使用工具提示了

【解决方案4】：

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

注意： Bootstrap 3.0 ~ 3.2解决方案

现在，wrapping your tooltip in a div is the solution，但如果您希望整个 <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'
    });
});

【讨论】：

如果你想让整个显示工具提示，只需将工具提示直接应用到 td 元素
@shock_gone_wild 这不是重点。如原始问题和每个答案中所述，将工具提示应用于任何 <td> 元素将破坏整个表格。这就是为什么我们都选择在其中添加另一个元素。也就是说，我不知道 Bootstrap 4 的新奇之处，这个错误可能已经修复。
不，如果您添加 container: 'body' ，它不会破坏表格。在这里查看我的答案。 stackoverflow.com/a/34882401/3927116
container 于 2014 年推出，距此问题 2 年。感谢您的评论，我将进行一些编辑以阐明此选项，并明确此错误与最新版本的 Bootstrap 无关。
我刚刚添加了这个，因为一个高度赞成的答案已经使用了容器选项。对于未来的读者，这些信息可能非常有用;)