From 90b1a5882fe27e46f838420afbd5e1c054fb52df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=9D=E5=93=B2?= <loki.zjj@antgroup.com>
Date: Mon, 5 Jun 2023 18:25:01 +0800
Subject: [PATCH] feat: tooltip interaction support showContent params

---
 .../chart-emit-item-tooltip-hide-content.ts   | 71 +++++++++++++++++++
 __tests__/plots/api/index.ts                  |  1 +
 src/interaction/tooltip.ts                    | 35 ++++-----
 3 files changed, 91 insertions(+), 16 deletions(-)
 create mode 100644 __tests__/plots/api/chart-emit-item-tooltip-hide-content.ts

diff --git a/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts b/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts
new file mode 100644
index 0000000000..aa0136adc9
--- /dev/null
+++ b/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts
@@ -0,0 +1,71 @@
+import { Chart } from '../../../src';
+
+export function chartEmitItemTooltipHideContent(context) {
+  const { container, canvas } = context;
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  container.appendChild(wrapperDiv);
+
+  // button
+  const button = document.createElement('button');
+  button.innerText = 'Hide tooltip';
+  container.appendChild(button);
+
+  // p
+  const p = document.createElement('p');
+  p.innerText = '';
+  container.appendChild(p);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container: wrapperDiv,
+    canvas,
+  });
+
+  chart
+    .interval()
+    .data([
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ])
+    .encode('x', 'genre')
+    .encode('y', 'sold')
+    .encode('color', 'genre')
+    .interaction('tooltip', {
+      body: false,
+    });
+
+  const finished = chart.render();
+
+  finished.then((chart) =>
+    chart.emit('tooltip:show', {
+      data: { data: { sold: 115 } },
+    }),
+  );
+
+  chart.on('tooltip:show', ({ data }) => {
+    p.innerText = JSON.stringify(data);
+  });
+
+  const hide = () => {
+    console.log('hide');
+  };
+  chart.on('tooltip:hide', hide);
+
+  button.onclick = () => {
+    chart.emit('tooltip:hide');
+  };
+
+  return {
+    chart,
+    button,
+    finished,
+    clear: () => {
+      chart.off('tooltip:hide', hide);
+    },
+  };
+}
diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts
index 273078e39f..df2f65ce8e 100644
--- a/__tests__/plots/api/index.ts
+++ b/__tests__/plots/api/index.ts
@@ -34,3 +34,4 @@ export { chartEmitBrushHighlightAxisVertical } from './chart-emit-brush-highligh
 export { chartEmitBrushHighlightAxisHorizontal } from './chart-emit-brush-highlight-axis-horizontal';
 export { chartEmitBrushHighlightAxisCross } from './chart-emit-brush-highlight-axis-cross';
 export { chartEmitScrollbarFilter } from './chart-emit-scrollbar-filter';
+export { chartEmitItemTooltipHideContent } from './chart-emit-item-tooltip-hide-content';
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index a735da3ccb..c7c9725f2c 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -138,13 +138,13 @@ function showTooltip({
 }
 
 function hideTooltip({ root, single, emitter, nativeEvent = true, mount }) {
+  if (nativeEvent) {
+    emitter.emit('tooltip:hide', { nativeEvent });
+  }
   const container = single ? getContainer(root, mount) : root;
   const { tooltipElement } = container;
   if (tooltipElement) {
     tooltipElement.hide();
-    if (nativeEvent) {
-      emitter.emit('tooltip:hide', { nativeEvent });
-    }
   }
 }
 
@@ -616,6 +616,7 @@ export function tooltip(
     view,
     mount,
     bounding,
+    body,
   }: Record<string, any>,
 ) {
   const elements = elementsof(root);
@@ -650,19 +651,21 @@ export function tooltip(
       }
 
       const { offsetX, offsetY } = event;
-      showTooltip({
-        root,
-        data,
-        x: offsetX,
-        y: offsetY,
-        render,
-        event,
-        single,
-        position,
-        enterable,
-        mount,
-        bounding,
-      });
+      if (body) {
+        showTooltip({
+          root,
+          data,
+          x: offsetX,
+          y: offsetY,
+          render,
+          event,
+          single,
+          position,
+          enterable,
+          mount,
+          bounding,
+        });
+      }
 
       emitter.emit('tooltip:show', {
         ...event,