bootstrap 5 的 tooltip 组件初始化失败，通常是因为 javascript 在 dom 元素加载完成前就执行了，导致 `bootstrap` 对象未定义或目标元素无法获取。本文详解两种可靠解决方式：使用 `domcontentloaded` 事件监听，或启用 es 模块模式。
在 Bootstrap 5.2/5.3 中，Tooltip 是纯 JavaScript 驱动的组件（不再依赖 jQuery），需手动初始化。你遇到的 Uncaught ReferenceError: bootstrap is not defined 错误，根本原因并非 Bootstrap 版本问题，而是脚本执行时机不当——HTML 中的
✅ 正确做法是：确保 DOM 完全就绪且 Bootstrap JS 已加载完毕后再初始化 Tooltip。推荐以下两种经过验证的方案：
方案一：监听 DOMContentLoaded（最通用、推荐）
将初始化逻辑包裹在 DOMContentLoaded 事件中，确保 DOM 树构建完成、所有 HTML 元素可访问：
⚠️ 关键注意点：bootstrap.bundle.min.js（含 Popper）必须在初始化脚本之前引入；不要使用 defer 或 async 加载 Bootstrap JS（除非你明确控制执行顺序），否则可能破坏依赖时序；避免在 内直接写初始化脚本（无 DOM 上下文）。
方案二：使用 type="module"（现代简洁方案）
ES 模块脚本默认具有延迟执行特性（类似 defer），且会自动等待 DOM 解析完成。同时，模块作用域内可安全访问全局 bootstrap（只要其已在模块前加载）：
✅ 该方式代码更简洁，且天然规避执行时机问题；但仅适用于支持 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 尾部或被正确延迟执行——本质仍是执行时序问题，而非组件本身缺陷。
