直接改 .tooltip-inner 样式无效，因 bootstrap tooltip 的 dom 由 popper 动态插入 body 底部，受选择器权重、加载顺序及作用域限制；可靠解法是用 template 注入自定义 class 并同步调整 .tooltip-inner 和 .tooltip-arrow 样式。
直接改 .tooltip-inner 样式为什么没生效？
因为 Bootstrap Tooltip 的 DOM 是 Popper 动态插入到 底部的，你写的 .tooltip-inner { font-size: 16px; line-height: 1.5; } 很可能被 bootstrap.min.css 里权重更高或加载更晚的规则覆盖。
- 常见错误现象：样式写了但悬停后还是默认大小，加了
!important也不起作用 - 根本原因：选择器权重不够 + 样式表加载顺序错位 + 真实节点不在当前 CSS 作用域内
- 最可靠解法：用
template选项注入自定义 class，例如my-tooltip-lg，再写.my-tooltip-lg .tooltip-inner - 必须保留
.tooltip和.tooltip-inner这两个 class，否则 Popper 定位会失效
template 怎么配才能同时控制字体、行高和箭头对齐？
改 line-height 后小三角（.tooltip-arrow）容易上下偏移，是因为它的 margin-top 是基于旧行高计算的。只调内容区不行，得同步动箭头。
- 示例 template：
<div class="tooltip my-tooltip-lg" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> - 配套 CSS：
.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; padding: 8px 12px; } - 必须同步调整箭头：
.my-tooltip-lg .tooltip-arrow { margin-top: -4px; }（具体值取决于新line-height和font-size） - 避免用
max-width硬限制，换行时易撑破；推荐white-space: normal; word-break: break-word;
移动端长按触发时，Tooltip 显示位置为什么会错乱？
原生 data-bs-trigger="click" 在手机上只是模拟一次点击，手指一抬就 hide，根本达不到“按住 800ms 才显示”的效果；而且系统级长按菜单（如复制）会抢事件，导致定位丢失或 DOM 插入异常。
- 必须设
trigger: 'manual'，然后用touchstart/touchend+setTimeout控制生命周期 -
touchstart中要e.preventDefault()，否则 iOS/Android 会弹原生菜单 - 动态插入的元素（如 Vue 渲染后挂载的按钮），要在
show()前调tooltip.enable() - 显示后点击外部隐藏需手动监听
document.addEventListener('touchstart', ...)，并排除 tooltip 自身和触发源
滚动容器里 Tooltip 偏移的根本原因和修复方式
默认 container: 'body' 让 Tooltip 脱离触发元素的滚动上下文，一旦父容器有 overflow-y: auto，它就感知不到 scrollTop，top 值固定不变——滚动后必然错位。
- 正确做法：把
container指向最近的可滚动祖先，比如container: '.scrollable-list' - 该祖先不能是
overflow: hidden，否则 Tooltip 会被裁剪 - 搭配
boundary: 'window'防止跑出视口，且只有这时fallbackPlacement才真正生效 - 模态框（Modal）内要用
container: '.modal-body'或container: function() { return $(this).closest('.modal'); }
真正麻烦的不是调大字号或挪个位置，而是这些改动会连锁影响箭头偏移、滚动跟随、事件拦截和样式权重——每改一处，都得同步检查其他三处是否还对得上。
