引导程序“ tooltip”和“ popover”在表中增加了额外的大小

82

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

多谢指教！

— 米什卡
source

您到底是什么意思呢？js在预定义的空行下的一行中生成100个单元格。我创建了一个小提琴

— Devellar

@Devellar，激活工具提示时大小会增加（将鼠标悬停在单元格上）

— mishka

@MikhaillErofeev我也有同样的问题，如果您解决了，请告诉我

— Rnk Jangir 2012年

@RonakJangir，请参阅下面的答案

— mishka 2012年

@MikhaillErofeev我只想在td上添加工具提示，所以这个答案对我没有用。该解决方案已提交给twitter引导程序，请参见github.com/twitter/bootstrap/issues/5980

— Rnk Jangir 2012年

90

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

您需要创建一个内部的元素td和应用工具提示到它，像这样，因为一个工具提示本身是一个div，当它被放置在后td元素它刹车表格布局。

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

— 天体
source

57

从GitHub链接：从v2.3.x开始，解决方案是将工具提示/弹出框的容器选项设置为body。例如：$（...）。tooltip（{container：'body'}）; 或在HTML中使用data- *属性：data-container =“ body”

— Domenic，

5

@Domenic这应该是一个答案，然后标记为正确的解决方案。正常工作。

— Timm

1

请将此添加为答案，对于将来的开发人员来说更容易

— cmario

89

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

— 先生代码
source

3

谢谢！工作完美。

— 艾米·帕特森

谢谢！！该数据切换=“提示”选项工作，但不是容器：“身体”选项..

— R.莫

非常感谢，这节省了我的时间：)

— Viky293 '16

1

如果您的表格是模式表格，这将不起作用，因为工具提示会出现在页面的某个位置（可能我仍然找不到它）。买者自负。不过，可接受的答案仍然有效，只需将您的td内容包装在div中，然后将工具提示应用于该内容即可。

— 嬉皮岛'16

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>

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

— shock_gone_wild
source

1

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

— sebasira

9

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

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

现在，将您的工具提示包装在div中是解决方案，但是如果您希望整体<td>显示工具提示（由于使用Bootstrap CSS），则需要进行一些修改。一种简单的方法是将<td>padding转移到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'
    });
});

— ess
source

如果您想让整个<td>显示工具提示，只需将工具提示直接应用于td元素

— shock_gone_wild

@shock_gone_wild这不是重点。将工具提示应用于任何<td>元素将破坏整个表，如原始问题所述，以及每个答案。这就是为什么我们都选择在其中添加另一个元素的原因。就是说，我不知道Bootstrap 4的新颖性，并且这个错误可能已经修复。

— zessx

不，如果添加容器'body'，它不会破坏表。在这里查看我的答案。stackoverflow.com/a/34882401/3927116

— shock_gone_wild

1

该问题container已在提出此问题两年后的2014年推出。感谢您的评论，我将进行一些编辑以启迪此选项，并确切地说此错误与最新版本的Bootstrap不相关。

— zessx

1

我刚刚添加了此内容，因为高度支持的答案已经使用了容器选项。对于将来的读者来说，这些信息可能非常有用;）

— shock_gone_wild

1

您应该在数据表函数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>";
    }
 },

— 尼康·帕特尔（Nikonj Patel）
source

支持fnDrawCallback部分，并且是使用HTML格式初始化BS工具提示与启用分页的数据表一起使用的唯一位置。

— 德鲁

1

如果您将数据表用于表，则将使用完整表

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

                }
            });

— 拉吉德·卡瓦德（Rajdip Khavad）
source

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>

— 海德·阿巴斯
source