fix: correctly hide tooltip when point out (#6270)

Signed-off-by: orangii <[email protected]>
antvis · Sep 4, 2024 · cd756af · cd756af
1 parent 1657420
commit cd756af
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/g6/__tests__/demos/plugin-tooltip.ts b/packages/g6/__tests__/demos/plugin-tooltip.ts
@@ -1,4 +1,5 @@
 import data from '@@/dataset/combo.json';
+import type { IElementEvent } from '@antv/g6';
 import { Graph } from '@antv/g6';
 
 export const pluginTooltip: TestCase = async (context) => {
@@ -33,6 +34,7 @@ export const pluginTooltip: TestCase = async (context) => {
   pluginTooltip.form = (panel) => {
     const config = {
       trigger: 'click',
+      enable: 'all',
     };
     return [
       panel
@@ -46,6 +48,20 @@ export const pluginTooltip: TestCase = async (context) => {
             }),
           );
         }),
+      panel
+        .add(config, 'enable', ['all', 'node', 'edge', 'combo'])
+        .name('Change Enable Target')
+        .onChange((enable: string) => {
+          graph.setPlugins((plugins) =>
+            plugins.map((plugin) => {
+              if (typeof plugin === 'object' && plugin.type === 'tooltip') {
+                if (enable === 'all') return { ...plugin, enable: true };
+                else return { ...plugin, enable: (event: IElementEvent) => event.targetType === enable };
+              }
+              return plugin;
+            }),
+          );
+        }),
     ];
   };
 

diff --git a/packages/g6/src/plugins/tooltip.ts b/packages/g6/src/plugins/tooltip.ts
@@ -151,8 +151,8 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
     } = event;
     // click the same item twice, tooltip will be hidden
     if (this.currentTarget === id) {
-      this.currentTarget = null;
       this.hide(event);
+      this.currentTarget = null;
     } else {
       this.currentTarget = id;
       this.show(event);
@@ -294,7 +294,9 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
       this.tooltipElement?.hide();
       return;
     }
-    if (!this.tooltipElement || !this.isEnable(event)) return;
+    if (!this.tooltipElement) return;
+    // No target node: tooltip has been hidden. No need for duplicated call.
+    if (!this.currentTarget) return;
     const {
       client: { x, y },
     } = event;