Bootstrap 5如何批量初始化多个Tooltip实例 是否必须使用循环

Bootstrap 5 原生JS批量初始化Tooltip的实现方式 #

Bootstrap 5 所有原生组件的构造函数仅支持传入单个DOM元素作为初始化目标，直接传入选择器字符串时，内部只会调用querySelector匹配第一个符合条件的元素，因此无法批量生成实例，确实需要遍历匹配到的元素列表完成初始化。

以下是和你原有Bootstrap 4功能完全等价的原生实现代码：

// 匹配所有需要初始化Tooltip的元素
const tooltipEls = document.querySelectorAll('div.sidebar-menu i[data-bs-toggle="tooltip"]');

// 遍历初始化
tooltipEls.forEach(el => {
  // 初始化Tooltip实例，传入配置
  const tooltip = new bootstrap.Tooltip(el, {
    boundary: "viewport",
    delay: { "show": 500, "hide": 100 },
    placement: "right"
  });

  // 绑定show.bs.tooltip事件
  el.addEventListener('show.bs.tooltip', function() {
    const css = this.dataset.toggle;
    return document.querySelector(this.dataset.target).classList.contains(css);
  });
});

注意：以上代码需要放在DOM加载完成后执行，可包裹在document.addEventListener('DOMContentLoaded', () => { /* 代码放在这里 */ })中避免匹配不到元素。

如果需要简化重复操作，可以自己封装通用的批量初始化工具函数，后续所有Bootstrap组件都可以复用：

function initBSComponent(selector, component, options = {}, eventHandlers = {}) {
  document.querySelectorAll(selector).forEach(el => {
    const instance = new component(el, options);
    // 批量绑定事件
    Object.entries(eventHandlers).forEach(([event, handler]) => {
      el.addEventListener(event, handler);
    });
    return instance;
  });
}

// 调用示例
initBSComponent(
  'div.sidebar-menu i[data-bs-toggle="tooltip"]',
  bootstrap.Tooltip,
  { boundary: "viewport", delay: { "show": 500, "hide": 100 }, placement: "right" },
  {
    'show.bs.tooltip': function() {
      const css = this.dataset.toggle;
      return document.querySelector(this.dataset.target).classList.contains(css);
    }
  }
)

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