CSS 提示工具

提示工具（Tooltip） 是在鼠标悬停时在元素旁显示的一小段说明文字。可以用 纯 CSS 实现：把提示文字放在 ::after 或一个 span 里，默认隐藏，:hover 时显示，并用 position: absolute 定位在元素上方或下方。

基本思路

1. 父元素设 position: relative，提示内容用 position: absolute 定位。
2. 提示内容默认 不可见（opacity: 0 + visibility: hidden，或 display: none）。
3. 父元素 :hover 时显示提示，并设 top / left（或 bottom）让提示出现在合适位置。

---

用 data 属性 + ::after 实现

HTML 把提示文字放在 data-tooltip 里：

<span class="tooltip" data-tooltip="这是一段提示文字">悬停看我</span>

CSS 用 ::after 的 content: attr(data-tooltip) 取出文字，悬停时显示：

.tooltip {
  position: relative;
  border-bottom: 1px dotted #666;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #333;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

• bottom: 100% 表示提示在元素上方；若要在下方，改为 top: 100%，并设 margin-top。
• left: 50% + transform: translateX(-50%) 实现水平居中。

---

用子元素做提示（更易控制多行）

HTML：

<span class="tooltip-box">
  悬停
  <span class="tooltip-text">多行提示也可以写在这里</span>
</span>

CSS：

.tooltip-box {
  position: relative;
}

.tooltip-text {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 8px 12px;
  width: 200px;
  background: #333;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}

.tooltip-box:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

---

小结

• 父元素 position: relative，提示层 position: absolute，用 top/bottom/left 控制位置。
• 提示默认 opacity: 0; visibility: hidden，:hover 时改为 opacity: 1; visibility: visible，可加 transition 做淡入。
• 可用 attr(data-tooltip) 在 ::after 中显示，或单独一个子元素放提示文字。

下一节学习 CSS 图片廊。