纯 css 可实现带三角形箭头的 tooltip，核心是用伪元素配合 border 技巧绘制箭头：设宽高为 0，仅单边有色、其余透明，利用边框斜角生成三角形；需确保触发元素设 position: relative 以提供定位上下文，并通过 top/left 和 transform 精准对齐箭头位置。
纯 CSS 实现带三角形箭头的 Tooltip 完全可行，关键在于用伪元素 ::before 或 ::after 绘制箭头，并通过边框技巧控制方向和位置；不需要 JS，但必须注意父容器的定位上下文和 z-index 层级。
为什么用 border 技巧画三角形？
CSS 三角形本质是利用元素四条边框交汇时的斜角特性：把宽高设为 0，只设置单侧边框（如 border-top），其余三边设为透明，就能得到一个等腰直角三角形。方向由哪条边有颜色决定。
常见错误现象：border-bottom: 8px solid #333; 却没看到箭头——大概率是因为父元素没设 position: relative，导致伪元素脱离文档流后定位偏移或被裁剪。
实操建议：
- 箭头大小由边框宽度决定，例如
border-top: 6px solid #666生成高 6px 的向上箭头 - 要居中对齐，需配合
left: 50%+transform: translateX(-50%)（水平）或top: 100%+margin-top: -6px（垂直微调） - 避免用
border-radius在三角形上——它对 0 尺寸元素无效
如何让箭头精准指向触发元素？
Tooltip 的箭头位置依赖于其父容器（即触发元素）的定位方式。如果触发元素本身没有 position: relative，伪元素的 absolute 定位会逐层向上找最近的定位祖先，极易错位。
使用场景：hover 触发的 Tooltip 通常挂载在按钮、链接等内联元素上，这些元素默认是 static 定位，必须显式设置。
实操建议：
- 给触发元素加
position: relative - Tooltip 容器设
position: absolute，并用top/left控制整体位置 - 箭头伪元素用
position: absolute，再通过top/left相对于 Tooltip 容器定位，例如向下箭头放在顶部中央：top: -6px; left: 50%; transform: translateX(-50%) - 若 Tooltip 需随视口滚动固定位置，改用
position: fixed，但此时箭头定位基准变成视口，需重新计算偏移
不同方向箭头的 border 写法和定位差异
四个基本方向的三角形写法差异只在 border 和定位属性组合上，但容易混淆哪条边该设色、哪边该设透明。
参数差异：
- ↑ 向上箭头：
border-bottom: 6px solid #666; border-left: 6px solid transparent; border-right: 6px solid transparent;，伪元素top: -6px - ↓ 向下箭头：
border-top: 6px solid #666; border-left: 6px solid transparent; border-right: 6px solid transparent;，伪元素bottom: -6px - ← 向左箭头：
border-right: 6px solid #666; border-top: 6px solid transparent; border-bottom: 6px solid transparent;，伪元素left: -6px - → 向右箭头：
border-left: 6px solid #666; border-top: 6px solid transparent; border-bottom: 6px solid transparent;，伪元素right: -6px
性能 / 兼容性影响：所有写法均兼容 IE9+，无渲染性能问题；但若在大量元素上同时启用 hover Tooltip，建议加 will-change: transform 或用 transform: scale(0) + transition 控制显示/隐藏，避免重排。
移动端点击触发时的常见陷阱
纯 CSS Tooltip 在移动端默认不响应 :hover，很多设备会将首次点击解释为 hover 激活，第二次才真正触发，造成体验断层。
容易踩的坑：
- 仅靠
.tooltip:hover .tooltip-text在 iOS Safari 上可能无法稳定展开 - 未设置
touch-action: manipulation可能导致点击延迟 - 箭头在高 DPR 屏幕上出现模糊——因 border 宽度为整数像素，缩放后抗锯齿异常；可改用
clip-path或 SVG 背景替代（但失去纯 CSS 简洁性）
实操建议：如需可靠点击支持，至少加一层 :focus-within 回退，例如 .tooltip:focus-within .tooltip-text, .tooltip:hover .tooltip-text，并确保触发元素可获得焦点（tabindex="0"）。
真正难的是让箭头在各种字号、行高、缩放比例下都保持像素级对齐——border 宽度和 transform 偏移必须严格匹配，稍有出入就会悬空或穿透。动手前先在 DevTools 里调一次 border 和 top 值，比查十篇教程更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
