Tooltip箭头默认不显示主因是未初始化JS或CSS被覆盖；需确保引入bootstrap.bundle.min.js、正确初始化实例，并检查.tooltip-arrow伪元素的border、opacity及父级pointer-events是否被误改。
Tooltip箭头为什么默认不显示？
Bootstrap 5 的 tooltip 默认启用箭头（data-bs-toggle="tooltip" 时会自动渲染 .tooltip-arrow 元素），但你很可能看不到它——因为箭头本身是纯 CSS 绘制的，依赖于 :before 和 :after 伪元素叠加形成的三角形，而它的显隐完全受 opacity 和 visibility 控制。常见原因包括：
- 未调用
bootstrap.bundle.min.js（缺少 Popper 支持，Tooltip 根本没初始化） - 手动覆盖了
.tooltip-arrow的样式（比如设了display: none或重置了border） - 自定义 tooltip 模板时漏掉了
结构
如何确认箭头 DOM 已生成？
在浏览器开发者工具中检查 tooltip 弹出后的结构，应看到类似：
<div class="tooltip show bs-tooltip-top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner">提示内容</div> </div>
如果 .tooltip-arrow 缺失，说明你用了自定义 template 但没包含该元素；如果存在但不可见，重点查以下两点：
-
.tooltip-arrow的border是否被重写（Bootstrap 原生靠border-width+border-color实现三角形） - 父级
.tooltip是否设置了pointer-events: none或transform导致伪元素偏移失效
修改箭头颜色或大小要改哪些 CSS？
箭头本质是用两个错位的带边框三角形叠加（防锯齿），所以必须同时调整 :before 和 :after。例如将顶部箭头改为深蓝色、加大尺寸：
.bs-tooltip-top .tooltip-arrow::before {
border-top-color: #0d6efd;
border-width: 0.4rem 0.4rem 0 0.4rem;
}
.bs-tooltip-top .tooltip-arrow::after {
border-top-color: #fff;
border-width: 0.35rem 0.35rem 0 0.35rem;
}
注意：border-width 三值写法无效，必须四值（上右下左）；::before 在外层（颜色即 tooltip 背景色），::after 在内层（颜色即 tooltip 内容背景，通常是白色）；方向类名如 bs-tooltip-top、bs-tooltip-right 必须对应修改。
自定义箭头时最容易忽略的兼容性点
Bootstrap 5 使用 Popper v2 定位 tooltip，箭头位置由 Popper 自动计算并注入 style 属性（如 top: -0.6rem）。如果你用 CSS 覆盖了 .tooltip-arrow 的 position 或 transform，可能导致箭头脱离 tooltip 主体。更隐蔽的问题是：在 RTL 模式（dir="rtl"）下，bs-tooltip-left/bs-tooltip-right 的箭头左右逻辑会翻转，但自定义 border-left-color 等规则不会自动适配——得额外加 [dir="rtl"] .bs-tooltip-left .tooltip-arrow::before 这类选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
