bootstrap “tooltip” and “popover” add extra size in table

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