Bootstrap 5 动态添加的Tooltip无法正常触发显示的问题求助

嗨，我来帮你搞定这个问题！

你遇到的情况其实很常见：页面加载时你初始化了所有已存在的Tooltip触发元素，但后来动态添加的那个<span>是在DOM初始化完成之后才被插入的，所以之前的初始化代码根本没“看到”它，自然就不会绑定Tooltip的交互事件啦。

给你两个实用的解决方案，按需选就行：

方案一：动态添加元素后立即单独初始化它的Tooltip #

在你用jQuery设置完#warning+i的HTML内容之后，马上针对这个新添加的<span>初始化Tooltip就行。注意Bootstrap的Tooltip构造函数需要传入原生DOM元素，不是jQuery对象，所以可以这么写：

// 先插入动态元素
$("#warning"+i).html('<span class="exp-warn" data-bs-toggle="tooltip" data-bs-title="This pick will expire soon." data-bs-placement="right"><i class="bi bi-exclamation-diamond-fill"></i></span>');
// 初始化这个新元素的Tooltip
const newTooltipEl = $("#warning"+i).find('.exp-warn')[0];
new bootstrap.Tooltip(newTooltipEl);

方案二：封装通用初始化函数，每次更新DOM后调用 #

如果后续还要频繁动态添加Tooltip元素，可以把初始化逻辑封装成一个函数，页面加载时调用一次，每次动态添加元素后再调用一次。这样能确保所有符合条件的元素都被正确初始化，还能避免重复初始化的问题：

function initAllTooltips() {
  // 先销毁已有的Tooltip实例，防止重复绑定
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    const existingTooltip = bootstrap.Tooltip.getInstance(el);
    if (existingTooltip) {
      existingTooltip.dispose();
    }
    // 重新初始化Tooltip
    new bootstrap.Tooltip(el);
  });
}

// 页面加载完成后先初始化一次
document.addEventListener('DOMContentLoaded', initAllTooltips);

// 每次动态添加元素后调用这个函数就行，比如：
$("#warning"+i).html('你的span代码');
initAllTooltips();

最后再提醒一下：确保你已经正确引入了Bootstrap 5的Tooltip相关脚本（如果用的是模块化引入，要单独加tooltip.js；如果是完整的bootstrap.js就没问题），还有jQuery的选择器要准确，别选错元素哦～

内容来源于stack exchange