关于CSS Tooltips(鼠标经过时显示)的效果

Sure!

Sure!

首先，CSS Tooltips 是一种通过纯 CSS 实现的鼠标经过时会出现提示文字的效果，对于网站 UX 有很好的补充作用。接下来，我会详细讲解如何制作这种效果，包括两个示例说明。

制作 CSS Tooltips 效果

第一步：创建 HTML 结构

首先，在你的 HTML 文件中，需要创建一个包含提示文字的元素并加上一个 data 属性来表示提示信息。例如：

<span class="has-tip" data-tooltip="这里是提示文字">需要提示文字的元素</span>

第二步：用 CSS 创造提示效果

接下来，我们需要用 CSS 来创造提示效果。首先，设置元素的 position: relative; 属性。这是因为我们将使用绝对定位来放置提示框。

接着，创建一个带有绝对定位的伪元素（::before 或 ::after）。这个伪元素将被作为我们提示框的背景，并提供 Tooltip 效果。

.has-tip {
  position: relative;
}

.has-tip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

第三步：显示和隐藏 Tooltip 效果

最后，我们需要在鼠标移动到元素上时显示提示框，并在鼠标移出时隐藏提示框。

.has-tip:hover::before {
  opacity: 1;
}

现在，整个代码就可以放在一起了：

.has-tip {
  position: relative;
}

.has-tip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.has-tip:hover::before {
  opacity: 1;
}

示例1

这里是一个示例，展示了给两个不同的元素添加 Tooltip 效果：

<!-- 示例 1 HTML -->
<h2>这是一个例子</h2>
<ul>
  <li><span class="has-tip" data-tooltip="该项是第一项。">第一项</span></li>
  <li><span class="has-tip" data-tooltip="该项是第二项。">第二项</span></li>
</ul>

/* 示例 1 CSS */
.has-tip {
  position: relative;
}

.has-tip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.has-tip:hover::before {
  opacity: 1;
}

该示例将在鼠标悬停在列表项上时显示提示框。

示例2

这里是一个例子，将 Tooltip 与表单元素结合使用：

<!-- 示例 2 HTML -->
<h2>这是另一个例子</h2>
<form>
  <label>
    <input type="text" placeholder="在这里输入下拉列表框中要显示的内容">
    <span class="has-tip" data-tooltip="请选择下拉列表框中要显示的内容。">？</span>
  </label>
  <br><br>
  <label>
    <input type="checkbox">
    <span class="has-tip" data-tooltip="请确认是否同意条款。">?</span>
    我已经仔细阅读并完全同意 <a href="#">用户协议</a>。
  </label>
  <br><br>
  <button type="submit">提交</button>
</form>

/* 示例 2 CSS */
.has-tip {
  position: relative;
}

.has-tip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.has-tip:hover::before {
  opacity: 1;
}

该示例会在鼠标悬停在每个表单元素上时显示提示框。

希望这个攻略能够帮助你快速实现 CSS Tooltips 效果。