Paolo Rossi Paolo Rossi - 3 months ago 21
CSS Question

Bootstrap tooltips moves up has-feedback icon

When using the has-feedback class to add an icon on a form field and using the bootstrap tooltip, the icon moves up. I get the same behavior with chrome, firefox and 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 File

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


Here the example
Bootply

Does anyone know how to solve this problem? Thank you

Mtz Mtz
Answer

The reason for it failing is this Bootstrap selector:

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

When you hover the field, the tooltip's <div> is inserted immediately after the input, thus breaking the + condition since the icon is no longer immediately following the input. A solution is to move the tooltip on the parent element, so that it doesn't interfere with children styling:

<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>

Demo: http://www.bootply.com/tohoEsh0cX