注意：
根据您引导版本（前3.3与否），你可能需要一个不同的答案。
注意注意事项。
当我激活的工具提示（悬停在细胞）或在popovers此代码，表的尺寸正在增加。 我怎样才能避免这种情况？
这里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>
感谢在咨询！
注：解决方案引导3.0〜3.2
您需要创建一个内部的元素td和应用工具提示到它，像这样 ，因为一个工具提示本身是一个div，当它被放置在后td元素它刹车表格布局。
这个问题与引导的最新版本中引入的。 有关于修复正在进行的讨论在这里GitHub上 。 希望下一个版本包括固定文件。
注：解决方案引导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 ，它会影响在某些情况下页面流，即推动其他元素下来。
由容器设置为主体元素，工具提示附加到身体，而不是它是从调用，所以它不会影响其他元素，因为没有什么“倒推”。
注：解决方案引导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>
这甚至与动态加载的内容的作品。 例如在使用数据表
我想一些精密添加到接受的答案，我决定用回答格式可读性。
注：解决方案引导3.0〜3.2
眼下， 在一个div包裹你的提示是解决方案 ，但如果你想你的整个它将需要一些修改<td>显示工具提示（因为引导的CSS）。 一个简单的方法做到这一点是transfert <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'
});
});
如果你正在使用的数据表的表那么这将是采用全
$('#TableId').DataTable({
"drawCallback": function (settings) {
debugger;
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
}
});
你应该初始化数据表的提示函数内部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>";
}
},
如果您使用的引导指令为AngularJS，使用工具提示追加到身体属性。
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
