引导“工具提示”和“popup”在表中添加额外的大小
注意：
根据你的Bootstrap版本（3.3之前或之后），你可能需要一个不同的答案。
注意笔记。
当我激活工具提示（hover在单元格上）或popup此代码时，表的大小正在增加。 我怎样才能避免这一点？
这里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> 感谢您的build议！
注： Bootstrap 3.0〜3.2的解决scheme
您需要在td创build一个元素，并将其应用于工具提示，因为工具提示本身是一个div，当它位于td元素之后时，它将制动表格布局。
Bootstrap的最新版本引入了此问题。 这里正在讨论关于GitHub的修复。 希望下一个版本包含固定的文件。
注意： Bootstrap 3.3+的解决scheme
简单解决scheme
在.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 ，在某些情况下，它会影响页面stream，即压下其他元素。
通过将容器设置为主体元素，工具提示将附加到主体而不是从其调用的位置，因此不会影响其他元素，因为没有任何内容可以“下推”。
- 引导工具提示文档
注意： Bootstrap 3.3+的解决scheme
如果要避免在向<td>元素应用工具提示时破坏表格，则可以使用以下代码：
$(function () { $("body").tooltip({ selector: '[data-toggle="tooltip"]', container: 'body' }); })
你的html可能看起来像这样：
<td data-toggle="tooltip" title="Your tooltip data"> Table Cell Content </td>
这甚至适用于dynamic加载的内容。 例如与数据表一起使用
我想为接受的答案增加一些精确度，我决定使用答案格式来提高可读性。
注： Bootstrap 3.0〜3.2的解决scheme
现在， 将工具提示封装在div中是解决scheme ，但是如果希望整个<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' }); });
您应该在数据表函数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>"; } },
