bootstrap "tooltip" and "popover" add extra size in table

Question

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

When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid this?

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

thank in advice!

What exactly extra size do you mean? js generates 100 cells in one row under the predefined empty row. I've created a [fiddle](http://jsfiddle.net/sZdYE/) — Devellar, Nov 07 '12 at 11:23
@Devellar, size increases on activate tooltip (hover over the cell) — mishka, Nov 07 '12 at 11:49
@MikhaillErofeev I am also have the same problem, If you solve it please tell me — Rnk Jangir, Nov 22 '12 at 11:59
@MikhaillErofeev I just want to add tooltip on td, so this answer is not usefull for me. By the the solution has submitted to twitter bootstrap see https://github.com/twitter/bootstrap/issues/5980 — Rnk Jangir, Nov 24 '12 at 05:58

score 94 · Answer 1 · edited Jan 19 '16 at 17:01

94

Note: Solution for Bootstrap 3.3+

Simple Solution

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

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

Alternatively you can do the same by 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 in the place it was called from. Due to the display: block, it affects the page flow in some cases, i.e pushing other elements down.

By setting the container to the body element, the tooltip is appended to the body instead of where it was called from, so it doesn't affect other elements because there is nothing to "push down".

Bootstrap Tooltips Documentation

edited Jan 19 '16 at 17:01

zessx

68,042
28
135
158

answered Feb 13 '15 at 07:59

MrCode

63,975
10
90
112

Thanks!! The data-toggle="tooltip" option worked but not the container : 'body' option.. – R. Mo Jan 26 '16 at 22:06
1

This doesn't work if your table is in a modal, as the tooltip appears somewhere in the page (probably I still haven't found it). Caveat Emptor. The accepted answer still works though, just wrap your td content in a div and apply the tooltip to that. – Hippyjim Sep 30 '16 at 09:35
Tooltip still appears somewhere else on the page, then promptly dissapears – L4marr Oct 27 '22 at 19:49

score 92 · Accepted Answer · edited Jan 19 '16 at 17:00

92

Note: Solution for Bootstrap 3.0 ~ 3.2

You need to create an element inside a td and apply a tooltip to it, like this, because a tooltip itself is a div, and when it is placed after a td element it brakes table layout.

This problem was introduced with the latest release of Bootstrap. There are ongoing discussions about fixes on GitHub here. Hopefully the next version includes the fixed files.

edited Jan 19 '16 at 17:00

zessx

68,042
28
135
158

answered Nov 07 '12 at 12:31

Devellar

1,139
1
9
9

58

From the GitHub link: The solution as of v2.3.x is to set the container option of the tooltip/popover to body. For example: $(...).tooltip({container: 'body'}); Or using a data-* attribute in the HTML: data-container="body" – Dom M. May 24 '13 at 13:27
5

@Domenic This should be an answer, and then marked as the correct solution. Just works. – Timm Jun 19 '13 at 09:20
1

please add this as an answer, much easier for future devs – cmario Mar 22 '16 at 19:32

score 19 · Answer 3 · edited Jan 24 '16 at 22:39

19

Note: Solution for Bootstrap 3.3+

If you want to avoid to break the table when applying a tooltip to a <td> element, you could use the following code:

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

You html could look like this:

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

This even works with dynamically loaded content. For example in use with datatables

edited Jan 24 '16 at 22:39

Mr Lister

45,515
15
108
150

answered Jan 19 '16 at 16:48

shock_gone_wild

6,700
4
28
52

1

Thank you! I'm finally able to use tooltip with datatables – sebasira Mar 22 '19 at 12:42

zessx · Answer 4 · 2016-01-19T16:59:26.133

9

I would like to add some precision to the accepted answer, I decided to use the answer format for readibility.

Note: Solution for Bootstrap 3.0 ~ 3.2

Right now, wrapping your tooltip in a div is the solution, but it will need some modifications if you want your whole <td> to show the tooltip (because of Bootstrap CSS). A simple way to do it is to transfert <td>'s padding to 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>'s padding to wrapper */
        $(this).css('padding', p.css('padding'));
        p.css('padding', '0 0');
    }
    $(this).tooltip({
        toggle: 'toolip',
        placement: 'bottom'
    });
});

edited Jan 19 '16 at 16:59

answered Mar 18 '13 at 15:55

zessx

68,042
28
135
158

if you want the whole to show the tooltip , just apply the tooltip directly to the td element – shock_gone_wild Jan 19 '16 at 16:36
@shock_gone_wild That's not the point. Applying a tooltip to any `` element will break the whole table, as stated in the original question, and every answer. That's why we've all chosen to add another element inside it. That said, I'm not aware of Bootstrap 4 novelties, and this bug may have been fixed. – zessx Jan 19 '16 at 16:40
no it won't break the table if you add container: 'body' . See my answer here. http://stackoverflow.com/a/34882401/3927116 – shock_gone_wild Jan 19 '16 at 16:45
1

The `container` has been introduced in 2014, 2 years after this question. Thanks for you comment, I'll make a few edits to enlight this option and precise that this bug isn't related to the latest versions of Bootstrap. – zessx Jan 19 '16 at 16:53
1

i just added this, because an highly upvoted answer already uses the container option. And for future readers, this information might be *very* useful ;) – shock_gone_wild Jan 19 '16 at 16:54
You're right. I edited each answer to avoid future confusion between versions. Thanks! – zessx Jan 19 '16 at 17:02
Thanks for your effort! – shock_gone_wild Jan 19 '16 at 17:03

score 3 · Answer 5 · answered Sep 22 '18 at 06:02

If you are using datatable for table then it will be use full

$('#TableId').DataTable({
                "drawCallback": function (settings) {
                    debugger;
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    });

                }
            });

score 2 · Answer 6 · answered Jul 23 '16 at 12:46

You should initialize Tooltip inside datatable function fnDrawCallback

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

And define your column as 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>";
    }
 },

Upvote for the fnDrawCallback part and is the only place that initializing a BS tooltip with HTML formatting works with a datatable that has paging enabled. — Drew, Jan 13 '20 at 14:08

score 0 · Answer 7 · answered Jan 22 '19 at 05:30

0

If you're using bootstrap directives for AngularJS, use tooltip-append-to-body attribute.

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>

answered Jan 22 '19 at 05:30

Haider Abbas

29
5

bootstrap "tooltip" and "popover" add extra size in table

7 Answers7

Simple Solution

Why does this work?

Linked