Bootstrap Tooltip不会自动初始化，必须在DOM加载后手动调用new bootstrap.Tooltip()；动态元素需插入DOM后再单独初始化，否则hover或click无反应。
Bootstrap 的 Tooltip 不会自动初始化，必须手动调用 .tooltip() 方法，否则 hover 或 click 时完全没反应。
为什么页面加载后 Tooltip 不显示？
常见现象是 HTML 中写了 data-bs-toggle="tooltip"、也引入了 Bootstrap JS，但鼠标悬停无任何提示。根本原因是：Bootstrap 5+ 已移除自动初始化逻辑，所有 Tooltip 必须显式初始化。
- 只靠
data-bs-*属性 + Bootstrap CSS/JS 文件加载，不足以触发 Tooltip - 必须在 DOM 加载完成后执行 JavaScript 初始化（如
document.addEventListener('DOMContentLoaded', ...)） - 如果元素是动态插入的（如 AJAX 渲染），需在插入后单独对新元素调用
.tooltip()
如何正确初始化单个或多个 Tooltip？
推荐使用原生 JS 方式（兼容性好、不依赖 jQuery），通过 bootstrap.Tooltip 构造函数实例化：
document.addEventListener('DOMContentLoaded', function () {
// 初始化所有带 data-bs-toggle="tooltip" 的元素
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
- 务必确保
bootstrap全局对象已加载（即 Bootstrap JS 已通过<script></script>正确引入） - 若只初始化某一个元素，可直接：
new bootstrap.Tooltip(document.getElementById('myBtn')) - 不建议混用 jQuery 版本（Bootstrap 5 已弃用 jQuery 依赖），避免
$().tooltip()写法
常见配置项与易错点
Tooltip 默认行为常不符合预期，比如位置偏移、延迟过短、无法关闭等，需通过 options 调整：
-
placement默认是'top'，但经常被遮挡；常用值：'right'、'bottom'、'left'，注意要用字符串而非 symbol -
trigger默认是'hover focus'，若想支持点击触发，设为'click'或'hover focus click' -
delay是对象：{ show: 0, hide: 100 }，单位毫秒；设show: 0可消除悬停延迟 - 中文内容需确保父容器有
data-bs-title（不是title），否则可能因空格或换行被截断
动态添加元素后 Tooltip 失效怎么办？
例如用 innerHTML 插入新按钮，或 Vue/React 组件更新 DOM 后，新节点不会自动拥有 Tooltip 行为。
- 不能复用之前的初始化代码（因为已执行过），需对新增节点单独初始化
- 示例：
const el = document.createElement('button'); el.setAttribute('data-bs-toggle', 'tooltip'); el.setAttribute('data-bs-title', '删除'); new bootstrap.Tooltip(el); container.appendChild(el); - 若频繁操作 DOM，可封装一个
initTooltips(el)函数，接收任意节点或 NodeList - 注意：重复对同一元素调用
new bootstrap.Tooltip()会报错"Tooltip is already initialized"，可用bootstrap.Tooltip.getInstance(el)先判断
最常被忽略的是：初始化时机和动态节点处理。哪怕属性写全、CDN 引对，只要没在 DOM 就绪后执行构造函数，或者新元素没重初始化，Tooltip 就永远是“静音”状态。
