如何让Tippy.js使用现有DOM元素且不将其从DOM中分离

问题分析 #

你当前的实现存在两个核心痛点：

1. 直接获取innerHTML会导致弹窗内容无法同步原popup-content的后续更新
2. 返回DOM元素给Tippy会被框架从原DOM树中移除，导致弹窗隐藏时无法修改内容

下面提供两种实用的解决方案：

方案1：弹窗显示时加载最新内容（简单高效） #

利用Tippy的onShow钩子，每次弹窗打开前重新拉取popup-content的最新内容，既保留原DOM元素，又保证内容同步。

tippy(target, {
  content: '', // 初始空内容
  onShow(instance) {
    const popupId = instance.reference.getAttribute('popup-id');
    const contentEl = document.querySelector(`popup-content[popup-id="${popupId}"]`);
    instance.setContent(contentEl.innerHTML);
  },
  allowHTML: true, // 必须开启，否则HTML内容会被转义
  // 其他配置项...
});

优点：代码简洁，适合大多数场景；原popup-content始终留在DOM中，可随时修改，下次弹窗打开自动同步最新内容。

方案2：克隆元素+实时同步（适合动态内容场景） #

如果需要弹窗显示期间也能实时同步原元素的变化，可以克隆原元素作为弹窗内容，并用MutationObserver监听原元素的修改，同步到克隆体。

tippy(target, {
  content(reference) {
    const popupId = reference.getAttribute('popup-id');
    const contentEl = document.querySelector(`popup-content[popup-id="${popupId}"]`);
    // 克隆原元素的完整结构与内容
    const contentClone = contentEl.cloneNode(true);

    // 监听原元素的所有变化，同步到克隆体
    const observer = new MutationObserver(mutations => {
      // 同步文本与子元素变化
      contentClone.innerHTML = contentEl.innerHTML;
      // 同步属性变化（可选）
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes') {
          contentClone.setAttribute(mutation.attributeName, contentEl.getAttribute(mutation.attributeName));
        }
      });
    });

    // 开启监听，覆盖所有可能的内容变化
    observer.observe(contentEl, {
      childList: true,
      subtree: true,
      characterData: true,
      attributes: true
    });

    // 保存观察者实例，弹窗销毁时清理
    reference._tippyContentObserver = observer;
    return contentClone;
  },
  onDestroy(instance) {
    // 清理观察者，避免内存泄漏
    instance.reference._tippyContentObserver?.disconnect();
  },
  // 其他配置项...
});

优点：弹窗显示期间，原popup-content的任何修改都会实时同步到弹窗；原元素始终保留在DOM中，不受Tippy操作影响。

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