在文本输入焦点的微型工具栏

Question

我想在焦点上的文本输入上放置一个迷你工具栏（下面的样机图片）。 minitoolbar 请帮助我使用span或div的css将其自身置于文本输入字段的整个长度的顶部。

{{3}}

Answer 1

可以通过在包装器中包含输入和文本来实现，使文本位置绝对并使其与输入的宽度对齐。然后只在输入焦点上显示文本。在这里演示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;
}