直接改 .tooltip-inner 的 border 常无效，因 tooltip dom 由 popper.js 动态插入 底部，易被 bootstrap 样式覆盖；需用高权重选择器（如 body .tooltip .tooltip-inner）、同步调整 border-radius 和 padding，并按方向分别设置 .tooltip-arrow 的 border-color，或通过 template 选项自定义结构确保样式可控。
直接改 .tooltip-inner 的 border 为什么经常没反应
因为 Tooltip 的 DOM 是 Popper.js 动态插入到 底部的，你写的 .tooltip-inner { border: 1px solid red; } 很可能被 Bootstrap 自带样式覆盖——尤其当它加载在你的 CSS 之前，或选择器权重不够时。更麻烦的是，.tooltip-inner 默认没有边框，所以加了 border 后，padding 和内部文字位置会偏移，但箭头（.tooltip-arrow）不会自动跟着调整。
推荐用更具体的选择器 + !important 确保生效
把自定义样式放在 Bootstrap CSS 文件之后加载，并用带上下文的选择器提升权重：
-
body .tooltip .tooltip-inner比单纯.tooltip-inner权重高，通常够用 - 如果仍被覆盖，加
!important——不是“不优雅”，而是解决真实优先级问题的必要手段 - 别只设
border，同步调border-radius和padding，否则圆角和内边距不匹配箭头定位
示例：
body .tooltip .tooltip-inner {
border: 2px solid #3182ce;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
}
改 .tooltip-arrow 边框颜色要分方向处理
.tooltip-arrow 本身是个纯色三角，靠 border 实现，不同方向用不同边的 border 颜色控制。比如 tooltip 在元素下方（bottom），箭头朝上，实际是靠 .tooltip-arrow 的 border-bottom-color 渲染；在上方（top）则靠 border-top-color。
- 统一改所有方向：写多个规则，覆盖
.bs-tooltip-top .tooltip-arrow、.bs-tooltip-bottom .tooltip-arrow等 - 更稳妥的做法：用
template选项给箭头容器加自定义 class，再单独控制 - 注意：改完后若箭头“发虚”或颜色不对，大概率是
border-color没对齐.tooltip-inner背景色，建议用同色系
用 template 选项完全掌控边框结构
这是最可控的方式，能绕过全局样式干扰，也方便做响应式或主题切换：
- 保留原生结构关键 class：
.tooltip-arrow和.tooltip-inner必须存在，否则 Popper 定位失效 - 在
template字符串里给外层加自定义 class，比如class="tooltip my-tooltip-bordered" - 然后写
.my-tooltip-bordered .tooltip-inner和.my-tooltip-bordered .tooltip-arrow，避免污染其他 tooltip
初始化示例：
const tooltip = new bootstrap.Tooltip(element, {
template: `
<div class="tooltip my-tooltip-bordered" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
`
});
边框样式真正生效的关键不在“加不加”，而在“加在哪一层”和“是否连带调整箭头与内边距”。很多人只改 .tooltip-inner，却忘了 .tooltip-arrow 的颜色和位置依赖于它——这点最容易被忽略。
