引导“工具提示”和“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>"; } },