tooltip组件bem命名以tooltip为块名，方向修饰符仅用--top/--right/--bottom/--left，每个修饰符须同时控制容器定位与箭头样式，禁止嵌套箭头修饰符，无箭头用--no-arrow。
Tooltip 组件的 BEM 命名核心原则
直接用 tooltip 作为块名，不加前缀（如 ui-tooltip），除非项目有强隔离需求；修饰符必须语义化表达方向，且仅描述「弹出位置」而非「箭头朝向」或「触发点位置」——比如 tooltip--top 表示整个 tooltip 框体出现在目标元素上方，而不是“箭头指向上”。
- 块名统一为
tooltip，避免Tooltip（PascalCase）或tool-tip（带多余连字符） - 方向修饰符只用四个基础值：
--top、--right、--bottom、--left；不用--up、--nort等非常规拼写 - 不为「自动定位 fallback」单独设修饰符（如
--auto），这类逻辑应由 JS 控制 class 切换，CSS 层只承载确定状态
方向修饰符如何影响定位与箭头样式
BEM 修饰符不只是命名，它要能直接驱动样式。每个 tooltip--{dir} 必须同时控制两件事：tooltip 容器的 transform / top 等定位偏移，以及伪元素 ::before 箭头的位置和旋转。
-
tooltip--top：容器加bottom: 100%+translateY(-8px)（避开目标元素），箭头用bottom: -6px+border-bottom: none+border-top-color: currentColor -
tooltip--right：容器加left: 100%+translateX(8px)，箭头用left: -6px+border-left-color: currentColor - 所有方向都用
transform: translate()微调，不用纯top/left，避免因父容器position变化导致偏移失效 - 禁止在修饰符里写
width或font-size—— 这些属于元素级样式，应放在tooltip__content上
为什么不能用 tooltip__arrow--top 这种嵌套修饰符
因为箭头不是独立可复用的子组件，它完全依附于 tooltip 的方向状态；把方向信息拆到子元素上，会导致 JS 切换方向时需同时操作两个 class，也破坏了 BEM “状态归属块”的约定。
- 正确做法：方向修饰符只挂在块上，如
<div class="tooltip tooltip--bottom">，箭头样式通过 <code>.tooltip--bottom::before控制 - 错误写法：
<div class="tooltip"> <span class="tooltip__arrow tooltip__arrow--bottom"></span> —— 此时 <code>tooltip__arrow--bottom无法单独生效，且失去与容器定位的耦合关系 - 若需支持「无箭头」模式，用独立修饰符
tooltip--no-arrow，而非在__arrow上做文章 - 移动端小屏下
tooltip--right可能溢出视口 → 需配合 JS 检测并动态切换为tooltip--left，此时 class 切换必须原子化（只换一个tooltip--*） - 缩放 125% 时
translateY(-8px)偏移量不足 → 推荐用rem或em单位，如translateY(-0.5rem) - 不要用
tooltip--top tooltip--mobile这种多修饰符组合来表达条件状态；应由 JS 移除旧方向类、添加新类，保持 DOM 中任意时刻只有一个方向修饰符
实际使用中容易被忽略的边界问题
方向修饰符看似简单，但真实场景下常因容器限制、滚动、缩放而失效；BEM 命名本身不解决这些问题，但命名方式决定了你能否干净地叠加响应式或运行时修正类。
