Bootstrap 5 Tooltip在动态添加表格行中无法正常工作的问题排查

问题原因分析 #

1. 初始化方式1的问题：页面加载时仅对当时存在的[data-bs-toggle="tooltip"]元素初始化tooltip，动态新增的元素不在初始化范围内，因此无法触发tooltip。
2. 初始化方式2的问题：
   • jQuery直接绑定hover事件仅对绑定时刻已存在的元素生效，动态生成的新元素不会继承该事件；
   • Bootstrap 5已移除jQuery插件接口，$(this).tooltip("show")这种写法不再有效，必须使用原生JS的bootstrap.Tooltip类操作。

解决方案 #

方案一：动态添加元素后立即初始化 #

每次新增tooltip元素到DOM后，直接对该元素初始化Bootstrap Tooltip，这是最直接高效的方式：

var OI = 1.222;
var Chg = 34.444;

// 构造tooltip元素HTML
var tltp = `<i class="info-tooltp" data-bs-placement="right" data-bs-html="true" data-bs-toggle="tooltip" data-bs-container="body" data-bs-original-title="<div class=strikeinfocontent><p><span>OI : </span><b>${OI}</b></p><p><span>OI Chg : </span><b>${Chg}</b></p></div>"></i>`

// 添加元素到表格tbody，并获取该元素的jQuery对象
var $newTooltipEl = $(tltp).appendTo(".strattabletodivtbody");

// 初始化新添加的tooltip元素（需传入原生DOM对象）
new bootstrap.Tooltip($newTooltipEl[0]);

方案二：批量初始化新增元素 #

如果一次性添加多个tooltip元素，可以在添加完成后，批量初始化tbody内未被初始化的tooltip：

// 先执行所有动态元素添加操作
$(".strattabletodivtbody").append(tltp);
// ...其他新增元素代码

// 批量初始化tbody内未初始化的tooltip
$(".strattabletodivtbody [data-bs-toggle='tooltip']").each(function() {
  // 检查是否已初始化（Bootstrap会给已初始化的元素添加_dataBsTooltip属性）
  if (!this._dataBsTooltip) {
    new bootstrap.Tooltip(this);
  }
});

方案三：事件委托（备选） #

如果无法在添加元素时直接初始化，可以通过父元素的事件委托，监听鼠标事件并动态初始化tooltip：

$(document).ready(function() {
  // 监听tbody内tooltip元素的鼠标进入事件
  $(".strattabletodivtbody").on("mouseenter", ".info-tooltp", function() {
    // 未初始化则创建实例
    if (!this._tooltip) {
      this._tooltip = new bootstrap.Tooltip(this);
    }
    // 手动触发显示
    this._tooltip.show();
  }).on("mouseleave", ".info-tooltp", function() {
    // 鼠标离开时隐藏tooltip
    if (this._tooltip) {
      this._tooltip.hide();
    }
  });
});

内容的提问来源于stack exchange，提问作者ashok