bootstrap 5 tooltip 默认需 javascript 初始化，且其箭头由动态 dom 和伪元素实现，无法直接用于零 js 的纯 css 静态提示；若需复用三角形箭头，应手动用 ::before/::after 叠加边框色绘制，并注意定位、响应式、暗色模式及 z-index 兼容性。
为什么不能直接用 Bootstrap 5 的 tooltip 组件？
Bootstrap 5 的 tooltip 默认依赖 JavaScript 初始化，且箭头是通过伪元素 + transform 旋转实现的，但它的 DOM 结构和 CSS 类（如 .tooltip-arrow）被包裹在动态插入的 div 中，无法直接复用于静态提示框。如果你要零 JS、纯 CSS、可复用的三角形箭头（比如 hover 显示的 info 提示），就得自己写。
用 ::before 和 ::after 叠加画三角形最稳
纯 CSS 画三角形本质是利用边框色叠加形成的斜角。单用 ::before 容易在高缩放或暗色模式下边缘发虚；推荐用两层：外层 ::before 做底色三角，内层 ::after 做小一号同色三角，形成抗锯齿+描边效果。
关键点：
- 父容器必须设
position: relative - 伪元素必须设
content: ""、position: absolute - 三角方向由哪条边设颜色决定：比如箭头朝下，就只设
border-top-color，其余三边为 transparent - 尺寸用
border-width控制，建议统一用0.4rem（适配 Bootstrap 的 spacing scale）
.tooltip-box {
position: relative;
background: #3498db;
color: white;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
}
<p>.tooltip-box::before {
content: "";
position: absolute;
top: -0.4rem;
left: 1rem;
border: 0.4rem solid transparent;
border-top-color: #3498db;
}</p><p>.tooltip-box::after {
content: "";
position: absolute;
top: -0.35rem;
left: 1.05rem;
border: 0.35rem solid transparent;
border-top-color: #3498db;
}</p>
箭头位置对齐要避开 transform 和 margin 干扰
常见错误是给箭头加 transform: translateX() 或用 margin-left 微调，结果在不同字体渲染或 zoom 下偏移。正确做法是：
- 用
left/right配合固定值（如left: 1rem）定位水平中心 - 若需响应式居中箭头（比如指向父元素中心），改用
left: 50%+transform: translateX(-50%)，但仅限于箭头本身宽高固定时 - 避免在父容器上设
text-align: center，它不影响绝对定位伪元素 - 如果提示框宽度不固定，把箭头
left改成calc(50% - 0.4rem)（减去三角形底边一半）更可靠
暗色模式和 border-radius 兼容性要注意
Bootstrap 5 默认支持 @media (prefers-color-scheme: dark)，但你的自定义箭头不会自动变色。必须显式覆盖：
@media (prefers-color-scheme: dark) {
.tooltip-box {
background: #2980b9;
}
.tooltip-box::before,
.tooltip-box::after {
border-top-color: #2980b9;
}
}
另外，Bootstrap 的 $border-radius 是 0.25rem，但三角形尖角默认是锐角。如果想让箭头根部圆润，不能给伪元素设 border-radius（无效），而要在父容器上用 clip-path 裁切，例如：
.tooltip-box {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.4rem),
calc(50% + 0.4rem) calc(100% - 0.4rem),
50% 100%,
calc(50% - 0.4rem) calc(100% - 0.4rem),
0 calc(100% - 0.4rem));
}
不过这个写法兼容性略低（IE 不支持），日常项目中优先保证箭头清晰可用，圆角属于锦上添花。
真正容易被忽略的是：伪元素的 z-index。如果提示框出现在其他绝对定位元素上方，但箭头被盖住，记得给 .tooltip-box 设 z-index: 10，并确保其父容器没有创建更小的 stacking context。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
