tooltip块名必须为小写连字符形式tooltip，方向修饰符仅用--top/--right/--bottom/--left，每个须同时控制容器定位与.tooltip__arrow的伪元素箭头样式，箭头必须作为独立元素且统一border-width。
Tooltip 必须用 tooltip 作为块名，方向修饰符只接受 --top、--right、--bottom、--left 四种，且每个修饰符必须同时控制容器定位和箭头样式——否则 JS 切换 class 后视觉错位、箭头消失或方向反了。
为什么不能写成 ui-tooltip 或 Tooltip
BEM 的块名要表达组件意图，不是项目归属或编程风格。写成 ui-tooltip 会让其他团队不敢复用（“这是 UI 组的”），Tooltip（PascalCase）在 CSS 里不合法，且和 HTML class 匹配时大小写敏感，JS 用 element.classList.add('Tooltip') 会静默失败。更隐蔽的问题是拼写混用：tool-tip、toolTip、tooltip 并存，导致 CSS 规则漏生效、测试环境 class 名匹配不上。
.tooltip__arrow 必须是独立 Element，不能塞进 .tooltip__content
把箭头写成 .tooltip__content::after 看似省事，但改颜色、加描边、调大小时就得动内容区域的样式，违反职责分离。BEM 要求结构清晰可复用，所以必须抽成 .tooltip__arrow 元素：
-
.tooltip__arrow必须设content: ""，否则伪元素不渲染 - 父级
.tooltip必须有position: relative，否则.tooltip__arrow的position: absolute会脱出上下文 - 所有方向的
border-width值必须统一（如都用6px），否则和气泡圆角对不齐；若.tooltip__content用了border-radius: 6px，尖角建议也用6px或8px
方向修饰符怎么写才不“塌”或反向
不同方向本质是哪条边设实色、其余设 transparent，顺序或缺边都会让三角形失效：
- 向上尖角（
.tooltip--top）：用border-bottom: 6px solid currentColor，其余三边transparent - 向下尖角（
.tooltip--bottom）：用border-top: 6px solid currentColor - 向左尖角（
.tooltip--left）：用border-right: 6px solid currentColor，配合right: 100%+top: 50%+transform: translateY(-50%) - 向右尖角（
.tooltip--right）：用border-left: 6px solid currentColor，配合left: 100%+top: 50%+transform: translateY(-50%)
所有方向都要用 transform 微调位置，不用纯 top/left ——否则父容器一旦有 transform 或 overflow: hidden，偏移就失效。
高 DPI 屏幕下箭头边缘发虚怎么办
单层边框三角在 retina 屏或缩放 125% 时容易模糊，正确做法是用 ::before 和 ::after 双伪元素模拟「描边+填充」：
-
.tooltip__arrow::before：画外轮廓，border-color: #ccc transparent transparent transparent -
.tooltip__arrow::after：叠在上面，border-color: #fff transparent transparent transparent，且border-width小 1px（如外层 6px，内层 5px） - 两者共用相同定位，靠 DOM 顺序或
z-index控制叠放，不需要额外 HTML 元素
这个细节在开发阶段常被跳过，但上线后用户反馈“提示看不清”“箭头毛边”，往往就卡在这里——不是逻辑问题，是像素对齐没做足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
