tooltip初始化必须在元素插入dom后执行，且data-bs-*属性需预先设置；动态元素须手动调用new bootstrap.tooltip()或setcontent()，并及时dispose()防泄漏。
Tooltip 初始化必须在元素存在后执行
Bootstrap 的 tooltip 不会自动监听 DOM 变化，动态插入的元素（比如用 innerHTML、append() 或 Vue/React 渲染出来的）默认没有初始化 tooltip 实例。你看到“没反应”，大概率是因为调用 $(...).tooltip() 或 new bootstrap.Tooltip(...) 时，目标元素还不存在，或者只对旧节点批量绑定了。
实操建议：
- 确保 tooltip 初始化代码放在元素插入 DOM 之后，比如在
document.body.appendChild(el)后立即调用 - 避免在页面加载时一次性选中所有
[data-bs-toggle="tooltip"]并初始化——动态加进来的不会被覆盖 - 如果用 jQuery 版本（Bootstrap 4/5），别写成
$('[data-bs-toggle="tooltip"]').tooltip()放在全局 ready 里就完事；要单独对新元素调用
data-bs-* 属性必须在初始化前已存在
Bootstrap 5 的 Tooltip 构造函数默认从元素上读取 data-bs-title、data-bs-placement 等属性来配置。如果你先创建元素、再 setAttribute、再初始化，一般没问题；但若顺序颠倒（比如先 new bootstrap.Tooltip(el)，再补 el.setAttribute('data-bs-title', 'xxx')），tooltip 就会显示空内容或 fallback 到默认值。
常见错误现象：
- tooltip 弹出但标题为空
- 位置始终是
top，无视你写的data-bs-placement="right" - 触发后无响应，控制台也没报错——其实是属性没生效
正确做法：在调用 new bootstrap.Tooltip(el) 前，确保 el 已有完整的 data-bs-* 属性，或显式传入配置对象：
const tooltip = new bootstrap.Tooltip(el, {
title: '动态内容',
placement: 'right'
});
事件委托不适用于原生 Tooltip 插件
有人试图用事件委托（如给 body 绑定 mouseenter，再判断 target 是否带 data-bs-toggle="tooltip"）来“模拟”动态支持，这是行不通的。因为 Bootstrap Tooltip 内部依赖自身实例管理生命周期（show/hide/toggle），不是单纯靠事件监听实现的；委托上去的事件无法触发实例方法，也无法正确清理内存。
替代方案只有两个靠谱方向：
- 每次动态插入后，手动为该元素新建一个
bootstrap.Tooltip实例（推荐，轻量可控） - 改用纯 CSS tooltip（适合静态提示）或第三方库如
tippy.js（原生支持虚拟节点和延迟绑定）
注意：bootstrap.Tooltip.getInstance(el) 在未初始化时返回 null，可用于避免重复初始化：
if (!bootstrap.Tooltip.getInstance(el)) {
new bootstrap.Tooltip(el);
}
Vue/React 等框架中需配合生命周期或 ref
在组件化环境里，“动态生成”往往发生在 mounted、useEffect 或 ref 回调中。这时候容易忽略：框架可能在渲染完成前就尝试初始化 tooltip，导致获取不到真实 DOM 节点。
关键点：
- Vue 3：用
onMounted+nextTick确保 DOM 更新完毕，再查ref并初始化 - React：用
useEffect，依赖项包含目标 ref，并检查ref.current !== null - 不要在 render 函数或模板中直接调用
new bootstrap.Tooltip——会重复执行甚至报错
另外，框架更新 props 后若需要更新 tooltip 内容，不能只改 data-bs-title 属性，得调用实例的 setContent() 方法（Bootstrap 5.2+）或销毁重建：
const tooltip = bootstrap.Tooltip.getInstance(el);
if (tooltip) {
tooltip.setContent({ '.tooltip-inner': newText });
}
最常被忽略的是：tooltip 实例持有对原始 DOM 节点的强引用，动态删掉元素却不调用 tooltip.dispose()，会造成内存泄漏。尤其在列表频繁增删的场景下，这个细节几乎没人查。
