CSS 提示工具(Tooltip)

下面是关于 CSS 提示工具（Tooltip） 的中文讲解，包括实现原理、常用样式、位置控制、动画效果等内容，适用于无 JavaScript 的轻量网页交互需求。

---

✅ 一、什么是 Tooltip？

Tooltip 是当用户将鼠标悬停在某个元素上时，弹出的一个小标签或说明框，用于提供简要提示或信息说明。

---

🧱 二、基本结构（HTML）

<div class="tooltip">
  悬停我看看
  <span class="tooltip-text">我是提示内容</span>
</div>

---

🎨 三、基本 CSS 样式

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 提示文本默认隐藏 */
.tooltip .tooltip-text {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;

  position: absolute;
  z-index: 1;
  bottom: 125%; /* 向上偏移 */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  opacity: 0;
  transition: opacity 0.3s;
}

/* 悬停时显示提示框 */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

---

📌 四、支持不同方向的 Tooltip

1. 向上弹出（默认）

bottom: 125% → 提示在上方
transform: translateX(-50%)

2. 向下弹出：

.tooltip .tooltip-text {
  top: 125%;
  bottom: auto;
}

3. 向左：

.tooltip .tooltip-text {
  top: 50%;
  left: auto;
  right: 125%;
  transform: translateY(-50%);
}

4. 向右：

.tooltip .tooltip-text {
  top: 50%;
  left: 125%;
  transform: translateY(-50%);
}

---

✨ 五、添加小三角（箭头）

使用伪元素 ::after 模拟小三角：

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

你可以根据方向调整箭头的位置和颜色。

---

🧪 六、完整示例（向上提示）

<div class="tooltip">
  🛈 提示按钮
  <span class="tooltip-text">这是详细说明内容</span>
</div>

<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: max-content;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;

  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  opacity: 0;
  transition: opacity 0.3s;
  z-index: 999;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
</style>

---

📱 七、移动端兼容建议

• :hover 在移动设备上通常无效或不一致。
• 推荐用 JavaScript 添加点击或长按触发 Tooltip。
• 也可以使用 <details><summary> 实现基础交互。

---

🧩 八、常见问题与优化建议

问题	解决方法
Tooltip 遮挡内容	设置 z-index 较大
显示位置不准确	使用 transform 配合 top/left 调整
不支持多行文字	移除 white-space: nowrap
希望渐变出现/消失	使用 opacity + transition 而非 display
显示时闪烁	使用 visibility: hidden/visible 避免抖动

---

🛠️ 九、升级版本建议（高级样式）

你可以为 Tooltip 加入以下特性：

• ✅ 弹性动画（scale 缩放）
• ✅ 自适应文本宽度
• ✅ 多方向支持
• ✅ 黑/白两种配色模式
• ✅ SVG 或图标触发点

---

如你希望我帮你写一个 响应式 Tooltip 组件、带图标提示的按钮，或者集成在某个具体页面元素中，欢迎告诉我你的使用场景，我可以直接为你生成代码。