CSS 提示工具（Tooltip）是一种在鼠标悬停（或获得焦点）时显示额外信息的小弹窗效果。常用于为用户提供更多上下文说明，而不占用页面额外空间。下面介绍一种纯 CSS 实现 Tooltip 的方法，包括 HTML 结构和 CSS 样式示例。

1️⃣ HTML 结构

通常，我们会在目标元素内嵌入一个提示文本的容器。例如：

<div class="tooltip">
  悬停我查看提示
  <span class="tooltiptext">这是提示工具文本</span>
</div>

说明：

  • .tooltip 是包裹目标元素的容器，并设置为相对定位。
  • .tooltiptext 是实际显示提示信息的元素，默认处于隐藏状态。

2️⃣ CSS 样式

使用以下 CSS 实现 Tooltip 效果：

/* Tooltip 容器 */
.tooltip {
  position: relative;    /* 为绝对定位的提示文本提供参照 */
  display: inline-block; /* 使容器适应文本大小 */
  cursor: pointer;       /* 鼠标悬停时显示指针 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;      /* 默认隐藏 */
  width: 140px;            /* 固定提示框宽度 */
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  
  /* 位置调整：提示框在目标元素上方居中显示 */
  bottom: 125%;            /* 距离目标元素底部 125% */
  left: 50%;
  transform: translateX(-50%);
  
  /* 渐变出现效果 */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip 箭头 */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; /* 箭头位于提示框底部 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* 当鼠标悬停在 Tooltip 容器上时显示提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

代码解析：

  • 容器定位：.tooltip 设置 position: relative;，使得内部绝对定位的 .tooltiptext 能够以其为参照。
  • 提示文本隐藏：默认通过 visibility: hidden; 和 opacity: 0; 隐藏提示文本，并利用 transition 实现渐显效果。
  • 显示提示文本：当鼠标悬停在 .tooltip 上时，通过 .tooltip:hover .tooltiptext 选择器将提示文本 visibility 设为 visible，opacity 设为 1，使其平滑显示出来。
  • 提示框箭头：使用伪元素 ::after 绘制小三角形，使提示工具更加直观。

3️⃣ 扩展与应用

  • 位置调整：通过修改 .tooltip .tooltiptext 中的 bottom、left 和 transform 属性，可以将提示文本显示在目标元素的其他位置（如右侧、左侧或下方）。
  • 触发方式：默认使用 :hover 触发 Tooltip，如果需要支持触摸设备或点击显示，可以结合 JavaScript 控制类名切换来实现。
  • 样式自定义：可根据设计需求调整提示框的背景色、边框、阴影等样式，使其与整体页面风格一致。

🎯 总结

使用纯 CSS 实现 Tooltip 的关键在于：

  • 通过 相对定位 和 绝对定位 定位提示文本。
  • 利用 visibility 和 opacity 隐藏与显示提示框，并配合 transition 产生渐显效果。
  • 使用 伪元素 绘制箭头，增强提示视觉效果。

通过上述方法，你可以轻松地为网页中的任意元素添加提示工具，为用户提供更友好的交互体验。