Tooltip button when hovering

Question

Hover over any button and you will see that it moves by itself.
Why is this happening, is this a bootstrap error?

HTML:

<div class="navbar-header" style="padding:4px 0 0 15px;"> <button id="btnCadastrar" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Cadastrar"> <span class="glyphicon glyphicon-plus"></span> </button> <button id="btnEditar" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Editar" style="margin-right:1px;"> <span class="glyphicon glyphicon-edit"></span> </button> <button id="btnRemover" type="button" class="btn btn-default btn-danger btn-sm" data-toggle="tooltip" data-placement="bottom" title="Remover"> <span class="glyphicon glyphicon-trash"></span> </button> </div> 

Bootply:
http://www.bootply.com/iYnzOb5GY4

Answer 1

Tooltips in button groups and input groups require special configuration

When using tooltips on elements in .btn-group or .input-group , you need to specify the container: 'body' option (documented below) to avoid unwanted side effects (such as the element grow wider and / or lose rounded corners when tooltip is triggered).

- Bootstrap explanation for tooltips

Here is what you need to change in your code

Js

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

HTML

Add this attribute to your buttons.

data-container="body"

Link to Bootply

Example