Search code examples
csstextinput

Mini toolbar on text input focus

I would like to position a mini toolbar on top of a text input on focus (mockup picture below). minitoolbar Please help me with the css of a span or div to place itself right on top the full length of a text input field.

minitoolbar

Solution

  • Can be achieved by including your input and text in a wrapper, making the text position absolute and aligning it to the width of your input.Then just display text on input focus. Demo here https://jsfiddle.net/q3g4db8u/

    <form>
  <div class="field">
    <input type="text" name="value">
    <span>This is my tooltip</span>
  </div>
</form>

.field {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}

span {
  position: absolute;
  top: -100%;
  width: 100%;
  background: #ddd;
  display: none;
}

input:focus ~ span {
  display: block;
}