如何用tippyjs实现从数据库加载数据的悬停卡片

1. 引入Tippy.js资源 #

先引入Tippy的核心库和样式文件，可通过CDN快速实现：

<!-- Tippy样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.7/dist/tippy.css" />
<!-- Tippy核心JS库 -->
<script src="https://unpkg.com/tippy.js@6.3.7/dist/tippy-bundle.umd.js"></script>

2. 核心实现逻辑 #

针对页面中所有带data-id属性的<a>标签初始化Tippy，同时处理加载状态、异步请求数据及缓存逻辑：

// 缓存已加载的用户数据，避免重复请求
const userCache = new Map();

// 初始化所有带data-id的a标签
tippy('a[data-id]', {
  // 初始显示加载状态
  content: '<span style="padding: 8px;">加载中...</span>',
  // 允许工具提示内的元素交互（如点击头像、链接）
  interactive: true,
  // 悬停触发工具提示
  trigger: 'mouseenter',
  // 延迟300ms显示，避免误触
  delay: [300, 0],
  // 宽度自适应内容
  maxWidth: 'auto',
  // 显示时触发数据加载
  onShow(instance) {
    const userId = instance.reference.getAttribute('data-id');
    
    // 优先使用缓存数据
    if (userCache.has(userId)) {
      instance.setContent(renderUserCard(userCache.get(userId)));
      return;
    }

    // 无缓存则发起异步请求
    fetchUserById(userId)
      .then(userData => {
        userCache.set(userId, userData);
        instance.setContent(renderUserCard(userData));
      })
      .catch(err => {
        instance.setContent('<span style="padding: 8px; color: #dc3545;">加载失败</span>');
        console.error('加载用户数据出错:', err);
      });
  },
  // 隐藏时重置内容为加载状态（可选）
  onHide(instance) {
    instance.setContent('<span style="padding: 8px;">加载中...</span>');
  }
});

// 替换为你的实际接口请求函数
function fetchUserById(userId) {
  // 示例：实际项目中替换为后端接口请求
  // return fetch(`/api/users/${userId}`).then(res => res.json());
  
  // 模拟异步请求延迟
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id: userId,
        name: `用户${userId}`,
        email: `user${userId}@example.com`,
        avatar: `https://picsum.photos/60/60?random=${userId}`
      });
    }, 800);
  });
}

// 渲染用户卡片HTML结构
function renderUserCard(user) {
  return `
    <div style="width: 220px; padding: 12px; display: flex; gap: 10px; align-items: center;">
      <img src="${user.avatar}" alt="${user.name}" style="border-radius: 50%; width: 60px; height: 60px;">
      <div>
        <h4 style="margin: 0; font-size: 16px;">${user.name}</h4>
        <p style="margin: 4px 0 0; font-size: 14px; color: #666;">${user.email}</p>
      </div>
    </div>
  `;
}

3. 静态HTML示例 #

你的编辑器输出的HTML结构可参考：

<a href="#" data-id="1">用户1</a>
<a href="#" data-id="2">用户2</a>
<a href="#" data-id="3">用户3</a>

关键细节说明 #

• 缓存机制：用Map存储已加载的用户数据，减少重复请求，提升性能。
• 状态处理：初始显示“加载中”，请求成功后替换为用户卡片，失败则显示错误提示。
• 交互优化：设置interactive: true支持工具提示内元素交互，delay参数避免误触触发请求。

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