必须用--bs-tooltip-arrow-color变量控制箭头颜色，直接设border-color或background-color无效；该变量需作用于.tooltip容器或其父级（如body），且须与--bs-tooltip-bg、--bs-tooltip-color成套设置以避免视觉割裂。
箭头颜色必须用--bs-tooltip-arrow-color变量控制
直接写.tooltip-arrow { border-color: red }或background-color完全无效——Bootstrap 5 的箭头是.tooltip-arrow::before伪元素通过 transform + border trick 渲染的三角形，颜色由 CSS 变量驱动。变量必须作用在.tooltip容器或其父级上，比如body或自定义 class 容器；写在触发按钮上不生效。
推荐做法：
– 全局统一：在 CSS 文件末尾加body { --bs-tooltip-arrow-color: #dc2626; }
– 局部定制：初始化时传customClass: "tooltip-danger"，再写.tooltip-danger .tooltip { --bs-tooltip-arrow-color: #dc2626; }
箭头位置偏移时别硬调margin-top，优先同步改--bs-tooltip-bg
箭头颜色和背景色不一致时，视觉上会“悬空”或割裂。比如设了--bs-tooltip-arrow-color: #3b82f6但没改--bs-tooltip-bg，箭头就蓝得突兀，而提示框还是默认黑底。
必须成套设置：
– --bs-tooltip-bg（背景）
– --bs-tooltip-color（文字）
– --bs-tooltip-arrow-color（箭头）
三者缺一不可，否则样式系统就断开了。变量作用域要一致，都在body下或都在同一个 customClass 下。
圆角过大导致箭头错位？.tooltip-arrow需配合transform微调
.tooltip-inner设了border-radius: 12px后，箭头常卡在圆角外侧，看起来像脱节——这不是 bug，是 Popper 定位逻辑未适配大圆角。
解决方法：
– 不要用margin-top/margin-bottom硬推，容易方向错乱
– 改用transform: translateY()统一微调，例如：.tooltip .tooltip-arrow { transform: translateY(-2px); }
– 如果用了template注入自定义 class（如.tooltip-lg），就写.tooltip-lg .tooltip-arrow，避免影响其他 tooltip
想彻底接管箭头样式？用template替换 HTML 结构
变量方案适合配色统一场景，但若要换 SVG 箭头、加阴影、或做响应式缩放，就得动结构。Bootstrap 允许用template参数完全重写 tooltip 容器 HTML。
关键约束：
– 必须保留class="tooltip"和class="tooltip-arrow"，否则 Popper 找不到锚点
– 必须保留class="tooltip-inner"，否则内容不渲染
– 示例：'<div class="tooltip tooltip-custom" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>'
– 后续所有样式都基于.tooltip-custom .tooltip-arrow来写，包括伪元素::before
最易被忽略的是变量作用域和配套色系——箭头不是贴图，它是整个 tooltip 视觉系统的动态组成部分，漏掉任意一个变量，或者把变量挂错节点，都会让定制效果看起来“只做了一半”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
