是否可以使用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>