From ed5a1d6b9148b78c86bdbeaa4d36ce0ecab09c53 Mon Sep 17 00:00:00 2001
From: Mengting Jiang <787982239@qq.com>
Date: Thu, 19 Sep 2024 11:50:58 +0800
Subject: [PATCH] fix: when update the position of tooltip, calculate the
 containerOffset (#6469)

---
 __tests__/plots/bugfix/index.ts      |  1 +
 __tests__/plots/bugfix/issue-6399.ts | 59 ++++++++++++++++++++++++++++
 src/interaction/tooltip.ts           |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 __tests__/plots/bugfix/issue-6399.ts

diff --git a/__tests__/plots/bugfix/index.ts b/__tests__/plots/bugfix/index.ts
index 1ef3bf1722..de95724240 100644
--- a/__tests__/plots/bugfix/index.ts
+++ b/__tests__/plots/bugfix/index.ts
@@ -1 +1,2 @@
 export { issue6396 } from './issue-6396';
+export { issue6399 } from './issue-6399';
diff --git a/__tests__/plots/bugfix/issue-6399.ts b/__tests__/plots/bugfix/issue-6399.ts
new file mode 100644
index 0000000000..a3cb42a506
--- /dev/null
+++ b/__tests__/plots/bugfix/issue-6399.ts
@@ -0,0 +1,59 @@
+import { Chart, PLOT_CLASS_NAME } from '../../../src';
+
+export function issue6399(context) {
+  const { container, canvas } = context;
+  const box1 = document.createElement('div', {});
+  const box2 = document.createElement('div', {});
+  box1.id = 'box1';
+  box2.style.height = '4000px';
+  container.style.height = '100vh';
+  container.style.overflow = 'auto';
+  box2.append(box1);
+  container.append(box2);
+  const chart = new Chart({
+    container: box1,
+    canvas,
+  });
+
+  chart
+    .line()
+    .data({
+      type: 'fetch',
+      value: 'https://assets.antv.antgroup.com/g2/indices.json',
+    })
+    .transform({ type: 'normalizeY', basis: 'first', groupBy: 'color' })
+    .encode('x', (d) => new Date(d.Date))
+    .encode('y', 'Close')
+    .encode('color', 'Symbol')
+    .axis('y', { title: '↑ Change in price (%)' })
+    .interaction('tooltip', {
+      mount: 'body',
+      crosshairsXStroke: 'red',
+      crosshairsYStroke: 'blue',
+    })
+    .tooltip({
+      title: (d) => new Date(d.Date).toUTCString(),
+      items: [
+        (d, i, data, column) => ({
+          name: 'Close',
+          value: column.y.value[i!].toFixed(1),
+        }),
+      ],
+    })
+    .label({
+      text: 'Symbol',
+      selector: 'last',
+      fontSize: 10,
+    });
+
+  setTimeout(() => {
+    container.scrollTo(0, 400);
+  }, 100);
+
+  const finished = chart.render();
+
+  return {
+    chart,
+    finished,
+  };
+}
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index 3af1642df9..c5666ce97b 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -143,6 +143,7 @@ function showTooltip({
     title,
     position,
     enterable,
+    container: containerOffset,
     ...(render !== undefined && {
       content: render(event, { items, title }),
     }),