fix: tooltip enterable (#5626)

* fix: tooltip enterable

* chore: remove unused pointer event

* chore: fix ci

* chroe: update component version

* fix: code review and renmae pointover to pointmove

__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts

@@ -57,15 +57,15 @@ describe('chart.emit', () => {
     chart.emit('tooltip:disable');
     await sleep(20);
 
-    dispatchFirstElementEvent(barCanvas, 'pointerover');
+    dispatchFirstElementEvent(barCanvas, 'pointermove');
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step0', {
       fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     chart.emit('tooltip:enable');
 
-    dispatchFirstElementEvent(barCanvas, 'pointerover');
+    dispatchFirstElementEvent(barCanvas, 'pointermove');
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step1', {
       fileFormat: 'html',
       selector: '.g2-tooltip',

__tests__/integration/api-chart-emit-item-tooltip-hide-content.spec.ts

@@ -21,7 +21,7 @@ describe('chart.emit', () => {
     // chart.on("tooltip:hide") should be called when hiding tooltip.
     const [tooltipHided, resolveHide] = createPromise();
     chart.on('tooltip:hide', receiveExpectData(resolveHide, null));
-    dispatchFirstElementEvent(canvas, 'pointerout');
+    dispatchFirstElementEvent(canvas, 'pointerleave');
     await tooltipHided;
   });
 

__tests__/integration/api-chart-emit-item-tooltip.spec.ts

@@ -37,13 +37,13 @@ describe('chart.emit', () => {
     // chart.on("tooltip:show", callback) should revive selected data.
     const [tooltipShowed, resolveShow] = createPromise();
     chart.on('tooltip:show', receiveExpectData(resolveShow));
-    dispatchFirstElementEvent(canvas, 'pointerover');
+    dispatchFirstElementEvent(canvas, 'pointermove');
     await tooltipShowed;
 
     // chart.on("tooltip:hide") should be called when hiding tooltip.
     const [tooltipHided, resolveHide] = createPromise();
     chart.on('tooltip:hide', receiveExpectData(resolveHide, null));
-    dispatchFirstElementEvent(canvas, 'pointerout');
+    dispatchFirstElementEvent(canvas, 'pointerleave');
     await tooltipHided;
   });
 

__tests__/integration/api-chart-tooltip-multi-chart.spec.ts

@@ -15,8 +15,8 @@ describe('chart.interaction.tooltip', () => {
     });
     await Promise.all([finished0, finished1]);
 
-    dispatchFirstElementEvent(canvas1, 'pointerover');
-    dispatchFirstElementEvent(canvas2, 'pointerover');
+    dispatchFirstElementEvent(canvas1, 'pointermove');
+    dispatchFirstElementEvent(canvas2, 'pointermove');
     expect(
       Array.from(document.body.getElementsByClassName('g2-tooltip')).length,
     ).toBe(2);

__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: auto; 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;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    A
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="frequency"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          frequency
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="0.08167"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        0.08167
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/interaction/stateages-interval-highlight-group-background.ts

@@ -44,7 +44,7 @@ stateAgesIntervalHighlightGroupBackground.steps = ({ canvas }) => {
     {
       skip: true,
       changeState: () => {
-        e1.background.dispatchEvent(new CustomEvent('pointerover'));
+        e1.background.dispatchEvent(new CustomEvent('pointermove'));
       },
     },
     step(e2, 'pointerover'),

__tests__/plots/tooltip/alphabet-interval-enterable.ts

@@ -0,0 +1,34 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function alphabetIntervalEnterable(): G2Spec {
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'interval',
+        padding: 0,
+        data: {
+          type: 'fetch',
+          value: 'data/alphabet.csv',
+        },
+        axis: false,
+        legend: false,
+        encode: {
+          x: 'letter',
+          y: 'frequency',
+          color: 'steelblue',
+        },
+        interaction: {
+          tooltip: {
+            enterable: true,
+          },
+        },
+      },
+    ],
+  };
+}
+
+// TOOD: this test case does not test the `enterable` feature.
+alphabetIntervalEnterable.steps = tooltipSteps(0);

__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts

@@ -41,14 +41,14 @@ alphabetIntervalTooltipRenderUpdate.steps = ({ canvas }) => {
         await sleep(100);
         const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
         const [e0] = elements;
-        e0.dispatchEvent(new CustomEvent('pointerover'));
+        e0.dispatchEvent(new CustomEvent('pointermove'));
       },
     },
     {
       changeState: async () => {
         const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
         const [e0] = elements;
-        e0.dispatchEvent(new CustomEvent('pointerover'));
+        e0.dispatchEvent(new CustomEvent('pointermove'));
       },
     },
   ];

__tests__/plots/tooltip/flare-treemap-poptip.ts

@@ -69,7 +69,7 @@ flareTreemapPoptip.steps = ({ canvas }) => {
     },
     {
       changeState: async () => {
-        rectangle?.dispatchEvent(new CustomEvent('pointerout'));
+        rectangle?.dispatchEvent(new CustomEvent('pointerleave'));
       },
       skip: true,
     },

__tests__/plots/tooltip/index.ts

@@ -4,6 +4,7 @@ export { bodyPoint2d } from './body-point-2d';
 export { cars3LineXd } from './cars3-line-xd';
 export { alphabetIntervalMulti } from './alphabet-interval-multi';
 export { alphabetIntervalTitle } from './alphabet-interval-title';
+export { alphabetIntervalEnterable } from './alphabet-interval-enterable';
 export { aaplLine } from './aapl-line';
 export { indicesLine } from './indices-line';
 export { temperaturesLineDiscrete } from './temperatures-line-discrete';

__tests__/plots/tooltip/profit-interval-legend-filter-ordinal.ts

@@ -37,7 +37,7 @@ profitIntervalLegendFilterOrdinal.steps = ({ canvas }) => {
       changeState: async () => {
         const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
         const [e0] = elements;
-        e0.dispatchEvent(new CustomEvent('pointerover'));
+        e0.dispatchEvent(new CustomEvent('pointermove'));
       },
     },
   ];

__tests__/plots/tooltip/utils.ts

@@ -25,7 +25,7 @@ export function tooltipSteps(...index) {
     const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
     const steps = index.map((i) => ({
       changeState: async () => {
-        elements[i].dispatchEvent(new CustomEvent('pointerover'));
+        elements[i].dispatchEvent(new CustomEvent('pointermove'));
       },
     }));
     return steps;
@@ -40,7 +40,7 @@ export function tooltipStepsByMarkType(markType, ...index) {
     );
     const steps = index.map((i) => ({
       changeState: async () => {
-        elements[i].dispatchEvent(new CustomEvent('pointerover'));
+        elements[i].dispatchEvent(new CustomEvent('pointermove'));
       },
     }));
     return steps;

package.json

@@ -58,7 +58,7 @@
     "animation"
   ],
   "dependencies": {
-    "@antv/component": "^1.0.0",
+    "@antv/component": "^1.0.1-beta.0",
     "@antv/coord": "^0.4.6",
     "@antv/event-emitter": "^0.1.3",
     "@antv/g": "^5.18.19",

src/interaction/tooltip.ts

@@ -146,15 +146,22 @@ function showTooltip({
   parent.tooltipElement = tooltipElement;
 }
 
-function hideTooltip({ root, single, emitter, nativeEvent = true }) {
+function hideTooltip({
+  root,
+  single,
+  emitter,
+  nativeEvent = true,
+  event = null,
+}) {
   if (nativeEvent) {
     emitter.emit('tooltip:hide', { nativeEvent });
   }
   const container = getContainer(root);
   const parent = single ? container : root;
   const { tooltipElement } = parent;
   if (tooltipElement) {
-    tooltipElement.hide();
+    // Must be clientX, clientY.
+    tooltipElement.hide(event?.clientX, event?.clientY);
   }
 }
 
@@ -622,7 +629,7 @@ export function seriesTooltip(
 
       // Hide tooltip with no selected tooltip.
       if (selectedElements.length === 0 || isEmptyTooltipData(tooltipData)) {
-        hide();
+        hide(event);
         return;
       }
 
@@ -680,8 +687,8 @@ export function seriesTooltip(
     { leading, trailing },
   ) as (...args: any[]) => void;
 
-  const hide = () => {
-    hideTooltip({ root, single, emitter });
+  const hide = (event: MouseEvent) => {
+    hideTooltip({ root, single, emitter, event });
     if (crosshairs) hideRuleY(root);
     if (marker) hideMarker(root);
   };
@@ -790,11 +797,11 @@ export function tooltip(
   const elementSet = new Set(elements);
   const keyGroup = group(elements, groupKey);
 
-  const pointerover = throttle(
+  const pointermove = throttle(
     (event) => {
       const { target: element } = event;
       if (!elementSet.has(element)) {
-        hideTooltip({ root, single, emitter });
+        hideTooltip({ root, single, emitter, event });
         return;
       }
       const k = groupKey(element);
@@ -813,7 +820,7 @@ export function tooltip(
       }
 
       if (isEmptyTooltipData(data)) {
-        hideTooltip({ root, single, emitter });
+        hideTooltip({ root, single, emitter, event });
         return;
       }
 
@@ -847,25 +854,23 @@ export function tooltip(
     { leading, trailing },
   ) as (...args: any[]) => void;
 
-  const pointerout = (event) => {
-    const { target: element } = event;
-    if (!elementSet.has(element)) return;
-    hideTooltip({ root, single, emitter });
+  const pointerleave = (event) => {
+    hideTooltip({ root, single, emitter, event });
   };
 
   const addEventListeners = () => {
     if (!disableNative) {
-      root.addEventListener('pointerover', pointerover);
-      root.addEventListener('pointermove', pointerover);
-      root.addEventListener('pointerout', pointerout);
+      root.addEventListener('pointermove', pointermove);
+      // Only emit pointerleave event when the pointer is not in the root area.
+      // !!!DO NOT USE pointerout event, it will emit when the pointer is in the child area.
+      root.addEventListener('pointerleave', pointerleave);
     }
   };
 
   const removeEventListeners = () => {
     if (!disableNative) {
-      root.removeEventListener('pointerover', pointerover);
-      root.removeEventListener('pointermove', pointerover);
-      root.removeEventListener('pointerout', pointerout);
+      root.removeEventListener('pointermove', pointermove);
+      root.removeEventListener('pointerleave', pointerleave);
     }
   };
 
@@ -875,7 +880,7 @@ export function tooltip(
     if (!element) return;
     const bbox = element.getBBox();
     const { x, y, width, height } = bbox;
-    pointerover({
+    pointermove({
       target: element,
       offsetX: x + width / 2,
       offsetY: y + height / 2,

src/spec/interaction.ts

@@ -181,7 +181,7 @@ export type TooltipInteraction = {
   bounding?: BBox;
   mount?: string | HTMLElement;
   css?: Record<string, any>; // @todo
-  // enterable?: boolean;
+  enterable?: boolean;
   sort?: (d: TooltipItemValue) => any;
   filter?: (d: TooltipItemValue) => any;
   render?: (