[Bug]: antv/g6 tooltip插件enterable开启后，tooltip框，鼠标移出节点时，tooltip框消失，导致tooltip框内的按钮点不到，trigger设置hover/click都可能有这种现象

[tao-hongxing]

Describe the bug / 问题描述

video.mp4

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@tao-hongxing 您好！以下是关于您问题的自动回复：

您好，感谢反馈 tooltip 插件 enterable: true 时的消失问题。
根据您的描述，启用 enterable 后，tooltip 框在鼠标移出节点时立即消失，导致无法点击 tooltip 内的按钮。无论 trigger 设置为 hover 或 click，均会出现此现象。

---

问题分析

• 根因：G6 tooltip 的消失逻辑通常是“当鼠标离开节点时隐藏”，但即使 enterable: true，鼠标移动到 tooltip 框本身时，仍可能被判定为“离开节点”，从而导致 tooltip 立即消失，无法操作内部按钮。
• 受影响配置：enterable: true + trigger: hover/click。
• 预期行为：鼠标移入 tooltip 框时，tooltip 应继续显示，允许操作内部元素。

---

解决建议

1. 检查 Tooltip 插件配置

建议参考如下最佳实践，确保配置正确：

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      type: 'tooltip',
      enterable: true,            // 允许鼠标进入 tooltip
      trigger: 'hover',           // 或 'click'
      position: 'right',          // 可选
      getContent: (e, items) => {
        // your custom HTML content with buttons
      },
    },
  ],
});

⚠️ 注意：G6 v5.x 版本部分场景下 enterable 仅在 hover 时有效，且部分情况下仍可能提前隐藏。

2. 规避方案

• 建议优先使用 trigger: 'click'
  这样 tooltip 会在点击节点后显示，并在点击其他区域或再次点击节点时关闭，用户可以操作 tooltip 内部按钮。
• 自定义 onOpenChange 回调
  利用插件的 onOpenChange，手动管理 tooltip 显示与隐藏逻辑，避免鼠标移入 tooltip 框时被关闭：

{
  type: 'tooltip',
  enterable: true,
  trigger: 'hover',
  onOpenChange: (open) => {
    // 可以在此处判断事件目标，如果是 tooltip 区域则不关闭
    // 如需更高级定制，可参考官方 API
  },
}

• 建议升级 G6 到最新版本
  部分 tooltip 行为在新版 G6 可能已优化。

3. 官方文档示例

请参考 Tooltip 插件官方文档 获取详细配置与示例代码。

---

示例代码（可点击按钮的 tooltip）

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      type: 'tooltip',
      enterable: true,
      trigger: 'click', // 推荐用 click
      position: 'right',
      getContent: (e, items) => {
        const item = items[0];
        return `
          <div>
            <button onclick="alert('操作 ${item.data.name}')">按钮</button>
          </div>
        `;
      },
    },
  ],
});

graph.render();

---

总结

• 建议先尝试 trigger: 'click' + enterable: true
• 检查是否有自定义事件拦截导致 tooltip 提前关闭
• 如问题依然存在，可提供最小复现代码或在线 DEMO，便于进一步定位

如需更复杂的交互（如 tooltip 与节点双向联动），建议查阅 官方文档 或补充更多信息。

---

如有进一步问题，欢迎补充复现代码或 DEMO，我们会协助排查！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。