mis*_*hka 79 javascript tooltip twitter-bootstrap twitter-bootstrap-3
注意:
根据您的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>
谢谢你的建议!
Dev*_*lar 88
注意: Bootstrap 3.0~3.2的解决方案
你需要在a中创建一个元素td并对其应用工具提示,就像这样,因为工具提示本身就是一个div,当它放在一个td元素之后它会制动表格布局.
最新版本的Bootstrap引入了这个问题.目前正在讨论有关GitHub的修复程序.希望下一个版本包含固定文件.
MrC*_*ode 88
注意: 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元素,工具提示将附加到正文而不是调用它的位置,因此它不会影响其他元素,因为没有任何"向下推".
sho*_*ild 16
注意: 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>
这甚至适用于动态加载的内容.例如在使用数据表
我想为接受的答案添加一些精确度,我决定使用答案格式来提高可读性.
注意: Bootstrap 3.0~3.2的解决方案
现在,将工具提示包装在div中是解决方案,但如果您希望整体<td>显示工具提示(因为Bootstrap CSS),则需要进行一些修改.一个简单的方法是将padfert <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'
});
});