直接修改 .tooltip-inner 样式常失效，因 Bootstrap 4 Tooltip 由 Popper.js 动态插入 <body> 底部，脱离原样式上下文；应将自定义 CSS 置于 Bootstrap CSS 之后，用 body .tooltip .tooltip-inner 或 template 注入自定义 class（如 .my-tooltip-lg）提升权重并确保定位与箭头协同。
直接改 .tooltip-inner 样式大概率失效，因为 Bootstrap 4 的 Tooltip 是由 Popper.js 动态插入到 <body> 底部的独立 DOM 节点，不继承触发元素的样式上下文，也不受普通局部 CSS 权重保护。
为什么 .tooltip-inner { font-size: 14px; } 没反应
常见错误现象：
- 写了样式但悬停后仍是默认字号/行高/边框
- 加了
!important还是无效 → 很可能 CSS 文件加载顺序错位（你的样式在bootstrap.min.css之前） - 用浏览器开发者工具检查发现渲染出的
<div class="tooltip-inner">确实没应用你的规则 → 说明选择器权重不够或作用域没覆盖到<body>下的真实节点
根本原因：Tooltip 的 HTML 结构不在原始 HTML 文档流中，而是在 <body> 末尾动态生成，所以 .tooltip-inner 必须能匹配到那个位置的元素。推荐做法是把自定义 CSS 放在 Bootstrap CSS 之后，并用带上下文的选择器提升权重：
- 用
body .tooltip .tooltip-inner替代单纯.tooltip-inner - 避免只依赖类名，尤其不要在 scoped style 或 Shadow DOM 里写这种规则
用 template 选项注入自定义 class 最可靠
这是绕过全局样式污染、支持多套主题、响应式适配的首选方式。关键点是：保留 .tooltip 和 .tooltip-inner 这两个核心 class（否则 Popper 定位会崩），仅在外层容器加自定义 class。
立即学习“前端免费学习笔记（深入）”；
示例：为大号提示框单独定制
const tooltip = new bootstrap.Tooltip(element, {
template: '<div class="tooltip my-tooltip-lg" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
对应 CSS（必须放在 Bootstrap CSS 之后）：
.my-tooltip-lg .tooltip-inner {
font-size: 16px;
line-height: 1.5;
padding: 0.5rem 0.75rem;
max-width: 280px;
}
.my-tooltip-lg .tooltip-arrow {
margin-top: -0.25rem; /* 同步修正箭头偏移 */
}
- 修改
line-height或padding后，.tooltip-arrow的margin-top/margin-left必须手动调，否则小三角会错位 - 若要支持 HTML 内容，
data-html="true"仍需开启，且确保white-space: normal或word-break: break-word配合max-width
改边框和圆角时要注意箭头颜色匹配
.tooltip-inner 加 border 不是简单设置就完事——箭头（.tooltip-arrow）本身是靠 border 实现的三角形，它的颜色必须和 .tooltip-inner 的边框/背景色协调，否则出现“断开感”。
不同方向的箭头依赖不同边的 border 颜色：
-
.bs-tooltip-top .tooltip-arrow→ 用border-bottom-color -
.bs-tooltip-bottom .tooltip-arrow→ 用border-top-color -
.bs-tooltip-left .tooltip-arrow→ 用border-right-color -
.bs-tooltip-right .tooltip-arrow→ 用border-left-color
推荐统一处理（以顶部为例）：
body .tooltip.my-tooltip-bordered .tooltip-inner {
border: 1px solid #4a5568;
border-radius: 0.375rem;
background-color: #f7fafc;
}
.bs-tooltip-top .tooltip-arrow {
border-bottom-color: #4a5568;
}
真正麻烦的不是写几行 CSS，而是每次调整 font-size、padding 或 border，都得同步动 .tooltip-arrow 的 margin 和 border-color —— 这个联动关系容易被忽略，一疏忽就导致箭头悬空或错色。
