feat(tooltip): support multiple tooltips for hover and click on the s…

…ame element (#6602)

* feat(tooltip): support multiple tooltips for hover and click on the same element

* docs: add dual tooltips demo

* docs: update screenshot

packages/g6/__tests__/demos/index.ts

@@ -141,6 +141,7 @@ export { pluginTimebar } from './plugin-timebar';
 export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
 export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';
 export { pluginTooltip } from './plugin-tooltip';
+export { pluginTooltipDual } from './plugin-tooltip-dual';
 export { pluginWatermark } from './plugin-watermark';
 export { pluginWatermarkImage } from './plugin-watermark-image';
 export { theme } from './theme';

packages/g6/__tests__/demos/plugin-tooltip-dual.ts

@@ -0,0 +1,61 @@
+import type { IElementEvent, Tooltip } from '@antv/g6';
+import { Graph } from '@antv/g6';
+
+export const pluginTooltipDual: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node1', style: { x: 100, y: 100 } },
+        { id: 'node2', style: { x: 200, y: 200 } },
+      ],
+      edges: [{ id: 'edge', source: 'node1', target: 'node2' }],
+    },
+    node: {
+      style: {
+        labelText: (d) => d.id,
+      },
+    },
+    plugins: [
+      function () {
+        return {
+          key: 'tooltip-click',
+          type: 'tooltip',
+          trigger: 'click',
+          getContent: (evt: any, items: any[]) => {
+            return `<div>click ${items[0].id}</div>`;
+          },
+          onOpenChange: (open: boolean) => {
+            const tooltip = this.getPluginInstance('tooltip-hover') as Tooltip;
+            if (tooltip && open) tooltip.hide();
+          },
+        };
+      },
+      function () {
+        return {
+          key: 'tooltip-hover',
+          type: 'tooltip',
+          trigger: 'hover',
+          enable: (e: IElementEvent) => {
+            const tooltip = this.getPluginInstance('tooltip-click') as Tooltip;
+            // @ts-expect-error access private property
+            return e.target.id !== tooltip.currentTarget;
+          },
+          getContent: (evt: any, items: any[]) => {
+            return `<div>hover ${items[0].id}</div>`;
+          },
+          onOpenChange: (open: boolean) => {
+            const tooltip = this.getPluginInstance('tooltip-click') as Tooltip;
+            if (tooltip && open) {
+              tooltip.hide();
+            }
+          },
+        };
+      },
+    ],
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/src/plugins/tooltip.ts

@@ -39,6 +39,12 @@ export interface TooltipOptions
    *  @defaultValue true
    */
   enable?: boolean | ((event: IElementEvent) => boolean);
+  /**
+   * <zh/> 显示隐藏的回调
+   *
+   * <en/> Callback executed when visibility of the tooltip card is changed
+   */
+  onOpenChange: (open: boolean) => void;
 }
 
 /**
@@ -162,9 +168,7 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
     // click the same item twice, tooltip will be hidden
     if (this.currentTarget === id) {
       this.hide(event);
-      this.currentTarget = null;
     } else {
-      this.currentTarget = id;
       this.show(event);
     }
   };
@@ -190,7 +194,6 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
    */
   public onPointerLeave = (event: IElementEvent) => {
     this.hide(event);
-    this.currentTarget = null;
   };
   /**
    * <zh/> 移动画布
@@ -200,7 +203,6 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
    */
   public onCanvasMove = (event: IElementEvent) => {
     this.hide(event);
-    this.currentTarget = null;
   };
 
   private onPointerEnter = (event: IElementEvent) => {
@@ -280,6 +282,7 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
         }),
       };
     }
+    this.options.onOpenChange?.(true);
     this.tooltipElement.update({
       ...this.tooltipStyleProps,
       x,
@@ -301,7 +304,9 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
   public hide = (event?: IElementEvent) => {
     // if e is undefined, hide the tooltip， external call
     if (!event) {
+      this.options.onOpenChange?.(false);
       this.tooltipElement?.hide();
+      this.currentTarget = null;
       return;
     }
     if (!this.tooltipElement) return;
@@ -310,7 +315,9 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
     const {
       client: { x, y },
     } = event;
+    this.options.onOpenChange?.(false);
     this.tooltipElement.hide(x, y);
+    this.currentTarget = null;
   };
 
   private get tooltipStyleProps() {

packages/site/examples/plugin/tooltip/demo/dual.js

@@ -0,0 +1,64 @@
+import { Graph } from '@antv/g6';
+
+const graph = new Graph({
+  container: 'container',
+  data: {
+    nodes: [
+      { id: '0', data: { label: 'node-0', description: 'This is node-0.' } },
+      { id: '1', data: { label: 'node-1', description: 'This is node-1.' } },
+      { id: '2', data: { label: 'node-2', description: 'This is node-2.' } },
+      { id: '3', data: { label: 'node-3', description: 'This is node-3.' } },
+      { id: '4', data: { label: 'node-4', description: 'This is node-4.' } },
+      { id: '5', data: { label: 'node-5', description: 'This is node-5.' } },
+    ],
+    edges: [
+      { source: '0', target: '1', data: { description: 'This is edge from node 0 to node 1.' } },
+      { source: '0', target: '2', data: { description: 'This is edge from node 0 to node 2.' } },
+      { source: '0', target: '3', data: { description: 'This is edge from node 0 to node 3.' } },
+      { source: '0', target: '4', data: { description: 'This is edge from node 0 to node 4.' } },
+      { source: '0', target: '5', data: { description: 'This is edge from node 0 to node 5.' } },
+    ],
+  },
+  layout: {
+    type: 'grid',
+  },
+  plugins: [
+    function () {
+      return {
+        key: 'tooltip-click',
+        type: 'tooltip',
+        trigger: 'click',
+        getContent: (evt, items) => {
+          return `<div>click ${items[0].id}</div>`;
+        },
+        onOpenChange: (open) => {
+          const tooltip = this.getPluginInstance('tooltip-hover');
+          if (tooltip && open) tooltip.hide();
+        },
+      };
+    },
+    function () {
+      return {
+        key: 'tooltip-hover',
+        type: 'tooltip',
+        trigger: 'hover',
+        enable: (e) => {
+          const tooltip = this.getPluginInstance('tooltip-click');
+          return e.target.id !== tooltip.currentTarget;
+        },
+        getContent: (evt, items) => {
+          return `<div>hover ${items[0].id}</div>`;
+        },
+        onOpenChange: (open) => {
+          const tooltip = this.getPluginInstance('tooltip-click');
+          if (tooltip && open) {
+            tooltip.hide();
+          }
+        },
+      };
+    },
+  ],
+  behaviors: ['drag-canvas', 'drag-element'],
+});
+
+graph.render();

packages/site/examples/plugin/tooltip/demo/meta.json

@@ -19,6 +19,14 @@
         "en": "Show on click"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ErhbR7ErhRwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "dual.js",
+      "title": {
+        "zh": "鼠标移入和点击同一元素时显示不同的提示框",
+        "en": "Dual tooltips"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DCZ_SbSHGnYAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }