bootstrap 5 的 tooltip 组件初始化失败，通常是因为 javascript 在 dom 元素加载完成前就执行了，导致 `bootstrap` 对象未定义或目标元素无法获取。本文详解两种可靠解决方式：使用 `domcontentloaded` 事件监听，或启用 es 模块模式。
在 Bootstrap 5.2/5.3 中，Tooltip 是纯 JavaScript 驱动的组件（不再依赖 jQuery），需手动初始化。你遇到的 Uncaught ReferenceError: bootstrap is not defined 错误，根本原因并非 Bootstrap 版本问题，而是脚本执行时机不当——HTML 中的 <button> 尚未被浏览器解析，而你的初始化代码已尝试访问 document.querySelectorAll('[data-bs-toggle="tooltip"]')，返回空 NodeList；更严重的是，若脚本位于 <head> 或未确保 Bootstrap JS 已加载，bootstrap 全局对象尚未挂载，直接调用 new bootstrap.Tooltip() 必然报错。
✅ 正确做法是：确保 DOM 完全就绪且 Bootstrap JS 已加载完毕后再初始化 Tooltip。推荐以下两种经过验证的方案：
方案一：监听 DOMContentLoaded（最通用、推荐）
将初始化逻辑包裹在 DOMContentLoaded 事件中，确保 DOM 树构建完成、所有 HTML 元素可访问：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是一个顶部提示">
悬停我查看 Tooltip
</button>
<!-- 注意：bootstrap.bundle.min.js 必须在初始化脚本之前加载 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
});
</script>⚠️ 关键注意点：bootstrap.bundle.min.js（含 Popper）必须在初始化脚本之前引入；不要使用 defer 或 async 加载 Bootstrap JS（除非你明确控制执行顺序），否则可能破坏依赖时序；避免在 <head> 内直接写初始化脚本（无 DOM 上下文）。
方案二：使用 type="module"（现代简洁方案）
ES 模块脚本默认具有延迟执行特性（类似 defer），且会自动等待 DOM 解析完成。同时，模块作用域内可安全访问全局 bootstrap（只要其已在模块前加载）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示信息">
Tooltip（底部）
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- type="module" 自动延迟执行，无需显式监听事件 -->
<script type="module">
const triggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
triggers.forEach(el => new bootstrap.Tooltip(el));
</script>✅ 该方式代码更简洁，且天然规避执行时机问题；但仅适用于支持 ES 模块的现代浏览器（Chrome 61+, Firefox 60+, Edge 16+, Safari 11+）。
补充说明与常见误区
- ❌ 不要在 $(document).ready() 中初始化：Bootstrap 5 已移除 jQuery 依赖，此写法无效且会报 $ is not defined；
- ❌ 避免重复初始化：若页面动态插入新 tooltip 元素，需对新增节点单独调用 new bootstrap.Tooltip()；
- ✅ 验证是否生效：初始化后，检查元素是否被添加 data-bs-original-title 属性及 aria-describedby，并确认控制台无 ReferenceError；
- ? 调试建议：在初始化脚本开头添加 console.log(bootstrap, tooltipTriggerList.length)，快速定位是 bootstrap 未定义还是选择器无匹配。
遵循以上任一方案，Tooltip 即可稳定工作。相比 Popover 能正常运行，正是因为 Popover 示例代码往往自然处于 DOM 尾部或被正确延迟执行——本质仍是执行时序问题，而非组件本身缺陷。
