html - 是否可以使用 css 将跨度样式设置为工具提示

Question

当我提交无法更改的表单时，我返回了一些 html。

<div>
   <label>Enter your email</div>
   <input type="text" name="email" value="bademail@" />
   <div class="error">That email is not valid</div>
<div>

我想设计它的样式，以便 div.error 显示一个图标，当我将鼠标悬停在该图标上时，它会显示文本作为工具提示。

这可以单独使用 css 来完成吗？

Answer 1

您可以在 div 上使用悬停来显示子跨度:

.error {
  position: relative;
}

.error > span {
  display: none;
}

.error:hover > span {
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  border: 1px solid red;
  border-radius: 3px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

<div>
   <label>Enter your email</label>
   <input type="text" name="email" value="bademail@" />
   <div class="error">icon<span>That email is not valid</span></div>
</div>

你也可以使用伪元素代替span:

.error {
  position: relative;
}
.error:hover::before {
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  border: 1px solid red;
  border-radius: 3px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  content: attr(data-tooltip);
}

<div>
  <label>Enter your email</label>
  <input type="text" name="email" value="bademail@" />
  <div class="error" data-tooltip="That email is not valid">icon</div>
</div>