Bootstrap's Tooltip Moves Table Cells To Right A Bit On Hover

I am using Bootstrap 3.1.1 for my project. Each cell in my table contains data like 000 or 111. On hover, I want to display this data as a tooltip. So far, this works. However, whe

Solution 1:

You have to add the data-container="body" as per documentation.

<td data-original-title="999"data-container="body"data-toggle="tooltip"data-placement="bottom" title="">
 &nbsp;
</td>

http://jsfiddle.net/uEqF2/2/

Solution 2:

You can set the "data-container" at this way:

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

Solution 3:

Bryce Easley answer correct, but I had to follow this for angular with ngx-bootstrap

<tdcontainer="body"tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."triggers="click">icon
</td>

https://valor-software.com/ngx-bootstrap/#/tooltip#append-to-body