fix(slider): adjust tooltip's position when clipped (#6042)

__tests__/integration/snapshots/tooltip/disasters-point-slider/step0.html

@@ -0,0 +1,7 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <h1 style="display:block; height: 100px; width: 100px">tooltip</h1>
+</div>

__tests__/plots/tooltip/disasters-point-slider.ts

@@ -0,0 +1,46 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
+import { tooltipSteps } from './utils';
+
+export function disastersPointSlider(): G2Spec {
+  return {
+    type: 'point',
+    insetTop: 30,
+    insetLeft: 30,
+    clip: true,
+    data: {
+      type: 'fetch',
+      value: 'data/disasters.csv',
+      transform: [
+        {
+          type: 'filter',
+          callback: (d) => d.Entity !== 'All natural disasters',
+        },
+      ],
+    },
+    scale: { size: { rangeMax: 35 } },
+    encode: {
+      x: 'Year',
+      y: 'Entity',
+      size: 'Deaths',
+      color: 'Entity',
+      shape: 'point',
+    },
+    style: {
+      stroke: 'black',
+      opacity: 0.8,
+      lineWidth: 1,
+    },
+    slider: { x: { values: [0.1, 0.5] } },
+    legend: false,
+    interaction: {
+      tooltip: {
+        render: () =>
+          `<h1 style="display:block; height: 100px; width: 100px">tooltip</h1>`,
+      },
+    },
+  };
+}
+
+disastersPointSlider.steps = tooltipSteps(0);

__tests__/plots/tooltip/index.ts

@@ -72,3 +72,4 @@ export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar';
 export { aaplLineOverflow } from './aapl-line-overflow';
 export { moviesIntervalScaleKeyScrollbar } from './movies-interval-scale-key-scrollbar';
 export { oneElementLine } from './one-element-line';
+export { disastersPointSlider } from './disasters-point-slider';

src/interaction/tooltip.ts

@@ -33,8 +33,8 @@ function getContainer(
   return canvas.parentElement as unknown as HTMLElement;
 }
 
-function getBounding(root): BBox {
-  const bbox = root.getBounds();
+function getBounding(root: DisplayObject): BBox {
+  const bbox = root.getRenderBounds();
   const {
     min: [x1, y1],
     max: [x2, y2],