Isotope动态加载元素无法触发Bootstrap Tooltip问题排查

Bootstrap Tooltip的初始化逻辑仅对页面加载完成时已存在于DOM中的元素生效。你通过JSON动态加载并插入的卡片元素，在Tooltip首次初始化后才被添加到DOM，因此无法触发Tooltip功能——调整库加载顺序无法解决这个核心问题，必须针对动态元素做二次初始化。

具体解决方案 #

1. 封装Tooltip初始化函数 #

把Tooltip的初始化逻辑封装成独立函数，方便在动态元素插入后重复调用：

function initTooltips() {
  $('[data-toggle="tooltip"]').tooltip({
    // 可根据需求配置全局参数，例如触发方式、位置等
    trigger: 'hover',
    placement: 'top'
  });
}

2. 分阶段初始化Tooltip #

• 页面加载完成时，先初始化硬编码元素的Tooltip
• 动态元素插入DOM并完成Isotope布局后，重新调用初始化函数处理新元素

修改你的custom_scripts.js代码：

$(document).ready(function() {
  // 初始化页面上已有的硬编码Tooltip元素
  initTooltips();

  function isotopeCode(){
    // 你的Isotope布局逻辑...
  }

  let json = {};
  var ability_translation = {};

  $.getJSON("ability_translation.json", function(traducciones) {
     ability_translation = traducciones;
  });

  $.getJSON("data.json", function(datos){
     // 处理JSON数据并动态生成卡片插入DOM的逻辑...
  }).then(() => {
    // 先完成Isotope布局
    isotopeCode();
    // 初始化新插入的动态元素的Tooltip
    initTooltips();
  });

  // 封装Tooltip初始化函数
  function initTooltips() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
  }
});

3. 确保动态元素的Tooltip属性完整 #

动态生成的卡片图片必须包含Bootstrap Tooltip所需的属性，示例：

<img src="card-image.jpg" data-toggle="tooltip" title="卡片的Tooltip提示内容" />

关键注意点 #

• 不要仅依赖$(document).ready()的一次性初始化，动态添加元素后必须重新执行Tooltip初始化
• 初始化时机必须在动态元素插入DOM且Isotope布局完成后，确保所有新元素已被渲染到页面

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