Bootstrap tooltip causing buttons to jump

Question

When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?

<div class="btn-group">
    <a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
    <a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash">    </i></a>
</div> 

Javascript:

$('[rel=tooltip]').tooltip();

Working version...

http://jsfiddle.net/BA4zM/147/

Here is a website that has it working without the jumping...

http://wrapbootstrap.com/preview/WB005S479

Answer 1

To avoid the jump, you need to set the container attribute. This is documented.

When using tooltips and popovers with the Bootstrap input groups, you'll have to set the container option to avoid unwanted side effects.

Try the following:

$('[rel=tooltip]').tooltip({container: 'body'});

Answer 2

As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.

That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:

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

Hope this helps if somebody has the same problem in the future.