60

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

auntialias
  • 107
  • 2
Brian Salta
  • 1,576
  • 1
  • 10
  • 18

2 Answers2

154

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'});
Howie
  • 1,845
  • 1
  • 10
  • 11
  • 18
    If you need to also use `selector` for the case where new elements with tooltips can be added to the page on the fly, then, you'll need to set the `container` via a data attribute. `data-container="body"` – steakchaser Jan 24 '14 at 23:41
  • hi @Howdie ! thanx for the solution, but, i still am curious, what exactly happens on btn-group, during tooltip ? – Deepak Yadav Sep 26 '14 at 17:33
  • 1
    @DeepakYadav, it seems, tooltip container is inserted to the closest descendant element, by default, this contents of container affects the layout of buttons and button groups. Specifying explicitly the `body` container resolves the issue. – Farside Jan 05 '17 at 10:08
  • In a bootstrap dialog don't use body but modal-dialog data-container=".modal-dialog" otherwise the tooltip will not show up – Marc Roussel Feb 15 '18 at 10:48
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.

Miguel M. Serrano
  • 87
  • 5