输入右侧的工具提示

Question

我编写了这个简单的 CSS 技巧，以便在您单击输入 (:focus) 时显示一个工具提示，将为您提供有关输入的一些信息。一切正常，但是工具提示显示在输入下方而不是上方。实际上我知道我可以使用边距来修复它，但我问是否有一种“更”干净的方法，当您以这种方式使用绝对位置时，它会自动将工具提示与输入对齐。

HTML：

<div>
    <input type="text" placeholder="Username">
    <span class="input_info">Info1</span>
</div>
<div>
    <input type="text" placeholder="Password">
    <span class="input_info">Info2</span>
</div>

CSS

.input_info {
    display: none;
    position: absolute;
    background: #000;
    border: 1px solid #fff;
    color: #fff;
    width: 100px;
    margin-left: 80px;
}

input[type="text"]:focus + .input_info {
    display: block;
}

https://jsfiddle.net/xzqsaobu/

Answer 1

您需要更改display: block为display: inline-block，删除margin-left和position: absolute;。

你的小提琴更新了。

片段：

.input_info {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  width: 100px;
  display: none;
}

input[type="text"]:focus + .input_info {
  display: inline-block;
}

<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>