Nuxt3 SSR应用中Tippy.js委托功能失效问题求助

先排查基础错误 #

你的app.vue里存在DOM标签闭合错误：</div应该改为</div>，这个小问题会导致DOM结构异常，直接影响选择器匹配。

核心解决方案（适配Nuxt3 SSR环境） #

Tippy.js是纯客户端DOM工具，在Nuxt3 SSR中必须确保仅在客户端执行初始化，同时适配路由切换场景：

1. 创建客户端专属插件
   在项目根目录新建plugins/tippy.client.js（文件名带.client，Nuxt会自动仅在客户端加载）：

import tippy, { delegate } from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // 必须导入CSS，否则提示框会存在但不可见

export default defineNuxtPlugin(() => {
  // 等待DOM完全就绪后初始化
  window.addEventListener('DOMContentLoaded', initTippyDelegate);

  // 监听路由切换，确保页面跳转后委托依然生效
  const router = useRouter();
  router.afterEach(() => {
    tippy.destroyAll(); // 先销毁旧实例避免重复绑定
    initTippyDelegate();
  });

  function initTippyDelegate() {
    delegate('#tippyRoot', {
      target: '[data-tippy-content]',
      // 直接通过函数获取内容，替代onShown钩子的复杂写法
      content: (reference) => reference.dataset.tippyContent,
      animation: 'scale',
      trigger: 'hover',
    });
  }
});

2. 确保目标元素层级正确
   所有带data-tippy-content属性的元素必须是#tippyRoot的子元素，否则委托无法捕获事件。

3. 排查样式冲突
   通过浏览器开发者工具检查：

• 是否存在.tippy-box元素（确认Tippy已初始化）
• 检查.tippy-box的display、opacity等样式是否被自定义CSS覆盖

简化测试验证 #

如果以上配置仍不生效，可以先简化初始化代码，排除复杂配置的干扰：

// 在app.vue的onMounted中测试（仅用于排查）
onMounted(() => {
  if (process.client) {
    const root = document.getElementById('tippyRoot');
    if (root) {
      delegate(root, {
        target: '[data-tippy-content]',
        content: '测试提示',
        trigger: 'click', // 用click替代hover，更容易验证
      });
    }
  }
});

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