Tooltip button moving when hover

Question

Hover any button and you will see that it's moving by itself.
Why is this happening, is it a bootstrap bug?

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 setting

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

– Bootstrap Explanation for Tooltips

Here what you need to change in your code

JS

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

HTML

Add this attribute to your buttons

data-container="body"

Here is Bootply link

Example