Best IT Recipes

Bootstrap tooltip and popover add extra size to table

Note:
Depending on the version of Bootstrap (up to 3.3 or not), you may need a different answer.
Pay attention to the notes.

When I activate tooltips (hover over a cell) or pop up in this code, the size of the table increases. How can i avoid this?

Here emptyRow is a function to generate tr with 100

<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>

Thanks for the consultation!

+75
javascript twitter-bootstrap tooltip twitter-bootstrap-3
Nov 07 '12 at 11:01
source share
7 answers

Note: Solution for Bootstrap 3.0 ~ 3.2

You need to create an element inside td and apply a tooltip to it, for example, because the tooltip itself is a div, and when it is placed after the td element, it blocks the location of the table.

This issue was introduced with the latest version of Bootstrap. GitHub fixes are discussed here . We hope that the next version contains fixed files.

+84
Nov 07
source share

Note: Solution for Bootstrap 3.3+

A simple solution

In the .tooltip() call, set the container parameter to body :

 $(function () { $('[data-toggle="tooltip"]').tooltip({ container : 'body' }); });

Alternatively, you can do the same using the data-container attribute:

 <p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>

Why does this work?

This solves the problem, because by default the tooltip has display: block , and the element is inserted at the place where it was called. Due to display: block it affects the flow of the page in some cases, i.e. pushing other elements down.

By setting the container in the body element, a tooltip is added to the body instead of where it was called from, so it does not affect other elements, because you don’t need to click anything.

+87
Feb 13 '15 at 7:59
source share

Note: Solution for Bootstrap 3.3+

If you want to avoid splitting the table when applying the tooltip to the <td> element, you can use the following code:

  $(function () { $("body").tooltip({ selector: '[data-toggle="tooltip"]', container: 'body' }); })

You can look like this:

 <td data-toggle="tooltip" title="Your tooltip data"> Table Cell Content </td>

It even works with dynamically loaded content. For example, when using datatables

+14
Jan 19 '16 at 16:48
source share

I would like to add some accuracy to the accepted answer, I decided to use the response format for reading.

Note: Solution for Bootstrap 3.0 ~ 3.2

Wrapping your tooltip in a div right now is a solution , but for this you will need some changes if you want your whole <td> show a tooltip (due to Bootstrap CSS). An easy way to do this is to wrap the <td> add-in wrapper:

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> padding to wrapper */ $(this).css('padding', p.css('padding')); p.css('padding', '0 0'); } $(this).tooltip({ toggle: 'toolip', placement: 'bottom' }); });
+9
Mar 18 '13 at 15:55
source share

If you use datatable for the table, then it will use the full

 $('#TableId').DataTable({ "drawCallback": function (settings) { debugger; $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); } });
+1
Sep 22 '18 at 6:02
source share

You must initialize the Tooltip inside the datatable fnDrawCallback function

"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },

And define your column below

  { 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>"; } },
0
Jul 23 '16 at 12:46
source share

If you use the boot directives for AngularJS, use the tooltip-append-to-body attribute.

 <td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
0
Jan 22 '19 at 5:30
source share


More articles:


All Articles