使用JQ修改Tippy.js v6.3.7提示文本时出现重叠问题求助

问题原因 #

提示重叠是因为原元素已初始化过Tippy实例，再次调用tippy()会创建新实例，新旧实例同时存在导致悬停时多个提示显示。而destroy()方法失效，通常是因为没有正确获取到Tippy实例对象。

解决方案 #

方案一：直接更新提示内容（推荐） #

无需销毁实例，直接调用实例的setContent()方法修改内容，更高效：

$.each(array, function(index, val) {
  const $element = $(`.js-btn[data-id="${val}"]`);
  // 获取原生DOM元素上挂载的Tippy实例
  const tippyInstance = $element[0]._tippy;
  if (tippyInstance) {
    // 直接更新提示内容
    tippyInstance.setContent('Delete');
  }
});

方案二：销毁旧实例后重新初始化 #

如果必须重新配置实例，先销毁旧实例再创建新实例：

$.each(array, function(index, val) {
  const $element = $(`.js-btn[data-id="${val}"]`);
  const domElement = $element[0];
  const tippyInstance = domElement._tippy;
  
  // 销毁已存在的实例
  if (tippyInstance) {
    tippyInstance.destroy();
    // 可选：完全清除元素上的Tippy关联
    tippy.clearInstance(domElement);
  }
  
  // 重新初始化Tippy
  tippy(domElement, {
    content: 'Delete'
  });
});

destroy() 实例方法官方文档翻译 #

destroy()
销毁Tippy实例，具体执行以下操作：

• 移除所有由实例创建的DOM元素（包括提示弹窗、背景遮罩等）
• 清除实例绑定的所有事件监听
• 从目标元素的_tippy属性中移除实例引用
• 解除实例与其他关联实例（如分组实例）的绑定关系

若需要彻底清除目标元素与Tippy的关联，可搭配使用tippy.clearInstance(element)方法，该方法会移除元素上的_tippy属性。

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