twitter-bootstrap - 悬停时工具提示按钮移动

Question

将鼠标悬停在任何按钮上，您会看到它自行移动。
为什么会发生这种情况，它是 Bootstrap 错误吗？

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>

Bootstrap 层:
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

这是您需要在代码中更改的内容

JS

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

HTML

将此属性添加到您的按钮
data-container="body"
这是 Bootply 链接

Example