CSS 如何实现 Tooltip 提示框？

Question

仓乃文 · Accepted Answer

Tooltip 提示框通过伪元素 + attr() 读取自定义属性内容，配合绝对定位和三角形箭头实现悬浮提示效果。

```css
.tooltip {
  position: relative;
  cursor: pointer;
}

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

.tooltip::after {
  content: ";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}

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

补充说明：
- attr(data-tooltip) 读取自定义属性作为提示内容
- ::before 是提示框主体，::after 是下方三角形箭头
- visibility + opacity 配合实现显示/隐藏动画
- 可通过调整定位实现上下左右四个方向的 Tooltip