Bootstrap工具提示默认无动画，需用opacity+transition实现淡入淡出：覆盖.tooltip.fade.show并重置visibility，设opacity过渡0.15s，避免transform冲突，优先级要高于Bootstrap样式。
Bootstrap工具提示默认不带动画，opacity + transition 是最轻量解法
Bootstrap 5 的 tooltip 默认靠 visibility: hidden 和 opacity: 0 控制显隐，但没配 transition，所以一出来就“啪”一下。想加淡入淡出，核心就两件事：改掉默认的 visibility 切换逻辑，补上 opacity 过渡。别碰 transform 或 scale，容易和 Bootstrap 自带的 popper 定位冲突。
- 必须覆盖 Bootstrap 的
.tooltip.fade类，它原本只负责opacity切换，但没设transition - 禁用
visibility的强制切换（Bootstrap 在.tooltip.show里设了visibility: visible），否则opacity动画会被打断 - 动画时长建议用
0.15s—— 比默认0.2s略快，更贴合 tooltip 的轻量感
怎么写 CSS 才不被 Bootstrap 覆盖？优先级和选择器要卡准
Bootstrap 的 tooltip 样式在 bootstrap.min.css 里权重很高，直接写 .tooltip.show { opacity: 1; transition: opacity 0.15s; } 很可能无效。得用更具体的选择器，且确保你的 CSS 在 Bootstrap 之后加载。
- 推荐用
.tooltip.fade.show——fade是 Bootstrap 启用过渡的开关类，加上它再覆盖更安全 - 必须显式重置
visibility：.tooltip.fade.show { visibility: visible; opacity: 1; }，否则动画第一帧会闪 - 初始态别漏掉：
.tooltip.fade { opacity: 0; transition: opacity 0.15s; }，否则隐藏时没动画 - 如果项目用了 Sass，直接在
$tooltip-opacity变量后追加transition更干净
为什么不用 @keyframes 或 JS 控制动画？
有人试过用 @keyframes + animation 替代 transition，结果 tooltip 经常错位或延迟触发。根本原因是 Bootstrap 的 show() 方法内部依赖 transitionend 事件来判断动画完成，而 animation 的事件名是 animationend，Popper.js 不监听这个。
-
transition是 CSS 原生支持的、与 DOM 状态绑定的动画机制，和 Bootstrap 的生命周期完全对齐 - JS 手动控制
setTimeout加 class 会破坏 tooltip 的销毁逻辑，比如快速移入移出时残留 DOM 节点 - 如果真要自定义入场效果（比如从下往上滑），得改 Popper 配置的
modifiers，不是单纯加 CSS 能解决的
移动端 Safari 下 opacity 动画偶尔卡顿？加 will-change 但别滥用
iOS 15+ 的 Safari 对 opacity 过渡优化得不错，但 tooltip 元素如果父容器有复杂背景或滤镜，仍可能掉帧。这时候加 will-change: opacity 有用，但只应在 .tooltip 上加，不能扩散到整个 tooltip 内容区。
立即学习“前端免费学习笔记（深入）”；
- 加在
.tooltip元素上：.tooltip { will-change: opacity; }，让浏览器提前准备合成层 - 千万别加在
.tooltip-inner上——它内容可变，频繁重绘反而拖慢 - 测试时用 Safari 的「Web Inspector → Rendering → Paint Flashing」看是否真有重绘，别盲目加
- 如果 tooltip 出现频次高（比如表格每行都有），建议用
debounce控制触发频率，比硬加动画更治本
visibility 没重置，就会出现闪、卡、错位。 
