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 c

Answer 1

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.

Answer 2

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'});