css - Bootstrap 工具提示向上移动有反馈图标

Question

当使用 has-feedback 类在表单字段上添加图标并使用 Bootstrap 工具提示时，图标会向上移动。我在 chrome、firefox 和 ie 上得到了相同的行为。

<div class="row">
  <div class="col-md-5 col-md-offset-1">
    <div class="form-group form-group-lg has-feedback">
      <input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
      <span class="glyphicon glyphicon-euro form-control-feedback"></span>
    </div>
  </div>
</div>  

JS 文件

$('[data-toggle="tooltip"]').tooltip(); 

这里是例子 Bootply

有谁知道如何解决这个问题？谢谢

Answer 1

失败的原因是这个 Bootstrap 选择器:

.form-group-lg .form-control+.form-control-feedback {...}

当您悬停该字段时，工具提示的 <div>在输入后立即插入，从而打破了 +条件，因为图标不再紧跟在输入之后。一种解决方案是在父元素上移动工具提示，这样它就不会干扰子元素的样式:

<div class="row">
  <div class="col-md-5 col-md-offset-1">
    <div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
      <input class="form-control" name="foo" placeholder="foo" type="text">
      <span class="glyphicon glyphicon-euro form-control-feedback"></span>
    </div>
  </div>
</div>

演示:http://www.bootply.com/tohoEsh0cX