Tooltip不显示主因是未手动初始化实例，Bootstrap 5.3起data-bs-toggle="tooltip"不再自动生效，必须在DOM加载后调用new bootstrap.Tooltip(el)创建实例。
Tooltip 不显示，90% 是没初始化实例，不是 HTML 写错了、也不是 CSS 被覆盖了——Bootstrap 5.3 要求你手动创建 bootstrap.Tooltip 实例，data-bs-toggle="tooltip" 不再自动生效。
为什么加了 data-bs-toggle="tooltip" 还是没反应
Bootstrap 5+ 彻底移除了对 data-bs-* 属性的自动初始化。页面加载完，哪怕 DOM 里明明白白写着 data-bs-toggle="tooltip"，只要没调 new bootstrap.Tooltip(el)，它就只是个带属性的普通元素。
- 常见错误：把初始化脚本放在
里，或在bootstrap.bundle.min.js加载前执行 - 必须确保
bootstrap.bundle.min.js（含 Popper）已加载完成，再执行初始化逻辑 - 不能只靠
<script>document.querySelectorAll(...).forEach(...)</script>放在底部——如果 DOM 还没解析完，querySelectorAll可能返回空列表 - 推荐写法：用
DOMContentLoaded事件包裹
document.addEventListener('DOMContentLoaded', () => {
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
});
动态插入的元素上 Tooltip 失效
Vue/React 渲染、innerHTML 插入、AJAX 返回 HTML 后追加——这些场景下，新节点不会被之前那波 querySelectorAll 捕获，自然也不会有 Tooltip 实例。
- 不要试图用事件委托“模拟” Tooltip，
bootstrap.Tooltip不响应委托事件 - 每次插入新元素后，立刻检查并初始化：
if (!bootstrap.Tooltip.getInstance(el)) new bootstrap.Tooltip(el) - 如果 tooltip 文本要随 Vue 数据更新，别只改
title或v-bind:title，得同步更新data-bs-original-title属性 - 避免内存泄漏：销毁旧实例再新建，或在组件卸载时调用
tooltip.dispose()
Tooltip 显示错位、被遮挡、位置不对
错位和遮挡通常不是 Tooltip 自身 bug，而是定位上下文或 z-index 冲突导致的。
- 检查父容器是否有
overflow: hidden或transform，这两者会创建新的 stacking context，让 Tooltip 被裁剪 -
data-bs-placement是相对触发元素的位置，不是视口；若触发元素本身在滚动容器内，Tooltip 可能随滚动偏移 - 默认 z-index 是 1070，若页面有 modal（z-index 1055）、fixed header（z-index 1030）等，Tooltip 可能被盖住——可全局提升：
.tooltip { z-index: 1080 !important; } - 不建议强行用
style="position: fixed"改 Tooltip 根节点，会破坏 Popper 的定位逻辑
禁用或关闭 Tooltip 的正确方式
直接调 el.tooltip('hide') 会报错，因为原生 DOM 元素没有 tooltip 方法；而乱调 hide() 又可能无效——比如实例还没 show 过、或延迟队列正在运行。
- 安全关闭单个：先用
bootstrap.Tooltip.getInstance(el)获取已有实例，再调hide() - 全局关闭所有：遍历
document.querySelectorAll('[data-bs-toggle="tooltip"]')，逐个检查实例是否存在 - 彻底停用（比如切换页面时）：调
tooltip.dispose()+ 移除data-bs-toggle属性，否则实例仍驻留内存，可能响应后续事件 - 临时隐藏 ≠ 停用：
hide()只是收起，show()还能唤回；dispose()后必须重新new才能用
最易忽略的一点：Tooltip 的 data-bs-delay 是对象格式，data-bs-delay='{"show": 200}' 才生效，写成 data-bs-delay="200" 会被忽略——这会导致你“点了没反应”，其实只是它在等 200ms 后才弹出。
