Tooltip箭头的BEM类名应为tooltip__arrow，不加--up、--right等方向修饰符；方向由父级tooltip--bottom等修饰符控制，箭头仅负责渲染形状并继承tooltip的CSS自定义属性。
Tooltip箭头的BEM类名该怎么写
直接用 tooltip__arrow，别加 --up、--right 这类修饰符。BEM里修饰符（Modifier）表达的是同一组件的「状态变体」，而箭头方向是布局定位问题，不是语义变体——它始终是 Tooltip 的一部分，只是位置不同而已。
为什么不能用 tooltip__arrow--top
常见错误是把方向当修饰符：比如 tooltip__arrow--top 或 tooltip__arrow--left。这会带来三个实际问题：
- 样式复用困难：每个方向都要单独写
transform和top/left/bottom/right值，没法共用基础箭头样式 - JS 控制复杂化：切换方向时不仅要改类名，还得同步维护多个修饰符，容易漏掉或冲突
- 违背 BEM 原则：方向由 tooltip 容器的
data-placement或 CSS 自定义属性决定，属于运行时布局逻辑，不该固化进类名结构
推荐做法：用父级修饰符 + 子元素定位
让 tooltip 容器承载方向信息，箭头只负责渲染形状。例如：
<div class="tooltip tooltip--bottom"> <span class="tooltip__content">提示文字</span> <span class="tooltip__arrow"></span> </div>
对应 CSS 中，用父级修饰符控制整体位置，再微调箭头：
.tooltip--bottom .tooltip__arrow {
top: -6px;
border-bottom-color: #333;
}
.tooltip--right .tooltip__arrow {
left: -6px;
border-right-color: #333;
}
这样既保持 BEM 结构清晰，又方便 JS 只需切换 tooltip--bottom 等一个类，箭头自动适配。
箭头本身要不要额外封装成独立块
不需要。箭头不是可复用的独立功能模块（比如 Button 或 Modal），它没有自己的行为、状态或配置项，纯属 Tooltip 视觉附属。强行拆成 arrow 块会导致：
- 命名冗余：
arrow__triangle没有意义 - 层级断裂：脱离
tooltip上下文后，箭头无法正确继承颜色、尺寸等上下文变量 - 维护成本上升：每次改 tooltip 主题色，得同步改两处地方
真正容易被忽略的是：箭头的尺寸和边框色必须通过 CSS 自定义属性（如 --tooltip-arrow-size、--tooltip-bg）从 tooltip 主体继承，而不是写死在 tooltip__arrow 里——否则换肤或动态主题时，箭头会掉队。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
