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

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

对.btn-group或中的元素使用工具提示时   .input-group，您必须指定选项container: 'body'   （记录如下）以避免不必要的副作用（如元素   当工具提示时，变宽和/或失去圆角   触发）。

- Bootstrap Explanation for Tooltips

您需要在代码中更改

<强> JS

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

<强> HTML

将此属性添加到按钮

data-container="body"

这是Bootply链接

Example

悬停时移动工具提示按钮

1 个答案:

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