直接改 .tooltip-arrow 无效，因其箭头由 ::before 和 ::after 伪元素通过 border 和 transform 绘制；需统一设置 --bs-tooltip-bg 与 --bs-tooltip-arrow-color 变量，或覆盖伪元素的 border-width 和 background-color 并同步调整 ::after。
为什么直接改 .tooltip-arrow 常常没反应
因为 Bootstrap 5 的箭头不是一张图片或 SVG，而是由 .tooltip-arrow::before 和 .tooltip-arrow::after 两个伪元素叠加画出来的三角形，依赖 border 和 transform 定位。你写的 .tooltip-arrow { background: red; } 根本不生效——它本身是空元素，颜色靠伪元素撑起。更关键的是，这些伪元素默认继承 --bs-tooltip-bg，但如果你只改了背景变量、没同步处理伪元素的 border-color 或 background-color，箭头就还是灰黑或透明。
用 CSS 变量统一控制箭头颜色最省事
Bootstrap 5.2+ 提供了 --bs-tooltip-arrow-color 变量，它会直接作用于 .tooltip-arrow::before 的 background-color（注意：不是 border-color）。这个变量必须和 --bs-tooltip-bg 一起设，否则视觉割裂。
- 必须在 Bootstrap CSS 加载之后设置，推荐写在
<style></style>块末尾或独立 CSS 文件底部 - 作用域选
body比:root更稳，避免 Shadow DOM 或 CSS-in-JS 场景下失效 - 漏掉
--bs-tooltip-arrow-color是最常见失误，哪怕背景和文字都变了，箭头还是默认色
示例：
body {
--bs-tooltip-bg: #0d6efd;
--bs-tooltip-color: #fff;
--bs-tooltip-arrow-color: #0d6efd;
}
想调大小或形状？得覆盖伪元素的 border-width
箭头尺寸由 .tooltip-arrow::before 的 border-width 控制，默认是 .4rem（约 6.4px）。改它就能缩放箭头，但要注意：上下左右方向对应不同边的 border，比如 top placement 下，箭头朝下，靠 border-top 生成；right placement 下，箭头朝左，靠 border-right 生成。
- 别只改
::before，::after是用来微调对齐和抗锯齿的，也得同步调 - 改完
border-width后，margin-top或margin-left往往要微调，否则箭头会偏移锚点 - 如果用了自定义
font-size或padding，箭头位置错得更明显，必须手动校准
例如放大箭头并居中：
.tooltip.show .tooltip-arrow::before {
border-width: .6rem;
}
.tooltip.show .tooltip-arrow::after {
border-width: .625rem; /* 略大一点盖住边缘 */
}
单个 Tooltip 换箭头样式必须用 template
全局变量适合统一主题，但如果你只想让「删除按钮」的 tooltip 箭头变红、「保存按钮」变绿，就得靠 JS 初始化时注入带 class 的 template。这是唯一能隔离样式的办法。
- template 字符串里必须保留
.tooltip和.tooltip-arrow这两个类名，否则 Popper 定位逻辑会断 - CSS 选择器要写成
.tooltip-danger .tooltip-arrow::before，不能只写.tooltip-danger::before - 箭头颜色不能靠继承，必须显式设
background-color，因为自定义 class 下 CSS 变量可能未透传
初始化示例：
const delBtn = document.getElementById('delete-btn');
new bootstrap.Tooltip(delBtn, {
template: '<div class="tooltip tooltip-danger" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>'
});
对应 CSS：
.tooltip-danger .tooltip-arrow::before {
background-color: #dc3545;
}
箭头看似小，但它连着定位锚点、受 Popper 约束、依赖伪元素堆叠逻辑——改错一个值，轻则偏移，重则悬空。变量覆盖适合主题统一，template 注入适合精准控制，二者别混用，也别跳过 ::after 的微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
