bootstrap "tooltip“和"popover”在表格中添加额外的大小
备注：
根据您的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>感谢您的建议！
回答 7
Stack Overflow用户
发布于 2012-11-07 20:31:38
说明:针对Bootstrap 3.0 ~ 3.2的解决方案
您需要在td中创建一个元素并对其应用工具提示，就像this一样，因为工具提示本身就是一个div，当它被放在td元素之后时，它会阻止表布局。
在最新版本的Bootstrap中引入了此问题。关于GitHub here修复的讨论正在进行中。希望下一个版本包含已修复的文件。
Stack Overflow用户
发布于 2015-02-13 15:59:18
说明:适用于引导程序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，而不是调用它的位置，因此它不会影响其他元素，因为没有什么可以“下推”的。
Stack Overflow用户
发布于 2016-01-20 00:48:47
说明:适用于引导程序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一起使用时
https://stackoverflow.com/questions/13268361
复制相似问题