悬停时移动工具提示按钮

Question

将鼠标悬停在任何按钮上,您将看到它自动移动.
为什么会发生这种情况,它是一个引导错误吗？

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

按钮组和输入组中的工具提示需要特殊设置

在a .btn-group或 a中的元素上使用工具提示时.input-group,您必须指定选项container: 'body' (如下所示)以避免不必要的副作用(例如,当触发工具提示时元素变宽和/或失去圆角).

- 工具提示的Bootstrap说明

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

JS

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

HTML

将此属性添加到按钮

data-container="body"

这是Bootply链接

例