feat(tooltip): show tooltip for small interval (#6289)

antvis · Jun 14, 2024 · e9ac6e0 · e9ac6e0
1 parent 65e09b0
commit e9ac6e0
Show file tree

Hide file tree

Showing 48 changed files with 114 additions and 66 deletions.
diff --git a/__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts b/__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts
@@ -2,7 +2,10 @@ import './utils/useSnapshotMatchers';
 import { Chart } from '../../src';
 import { createNodeGCanvas } from './utils/createNodeGCanvas';
 import { sleep } from './utils/sleep';
-import { dispatchFirstElementEvent, dispatchPlotEvent } from './utils/event';
+import {
+  dispatchFirstElementPointerMoveEvent,
+  dispatchPlotEvent,
+} from './utils/event';
 import { kebabCase } from './utils/kebabCase';
 
 const data = [
@@ -57,15 +60,15 @@ describe('chart.emit', () => {
     chart.emit('tooltip:disable');
     await sleep(20);
 
-    dispatchFirstElementEvent(barCanvas, 'pointermove');
+    dispatchFirstElementPointerMoveEvent(barCanvas);
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step0', {
       fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     chart.emit('tooltip:enable');
 
-    dispatchFirstElementEvent(barCanvas, 'pointermove');
+    dispatchFirstElementPointerMoveEvent(barCanvas);
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step1', {
       fileFormat: 'html',
       selector: '.g2-tooltip',

diff --git a/__tests__/integration/api-chart-emit-item-tooltip.spec.ts b/__tests__/integration/api-chart-emit-item-tooltip.spec.ts
@@ -4,6 +4,7 @@ import {
   dispatchFirstElementEvent,
   createPromise,
   receiveExpectData,
+  dispatchFirstElementPointerMoveEvent,
 } from './utils/event';
 import './utils/useSnapshotMatchers';
 import { createNodeGCanvas } from './utils/createNodeGCanvas';
@@ -37,7 +38,7 @@ describe('chart.emit', () => {
     // chart.on("tooltip:show", callback) should revive selected data.
     const [tooltipShowed, resolveShow] = createPromise();
     chart.on('tooltip:show', receiveExpectData(resolveShow));
-    dispatchFirstElementEvent(canvas, 'pointermove');
+    dispatchFirstElementPointerMoveEvent(canvas);
     await tooltipShowed;
 
     // chart.on("tooltip:hide") should be called when hiding tooltip.

diff --git a/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step1.html
@@ -1,7 +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;"
+  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: 120.68277500777992px; top: 208.92771362586603px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html b/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html
@@ -1,7 +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;"
+  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: 91.23999786376953px; top: 215.00100578146174px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step0.html
@@ -1,12 +1,12 @@
 <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;"
+  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: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <div>
     <dv>
       <h2>A</h2>
-      <span>(0, 0)</span>
+      <span>(98, 275)</span>
       <ul style="padding-left: 1em">
         <li style="color: steelblue">letter: A</li>
         <li style="color: steelblue">frequency: 0.08167</li>

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html
@@ -1,12 +1,12 @@
 <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;"
+  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: 128.8908045238724px; top: 385.56479294599274px;"
 >
   <div>
     <dv>
       <h2>B</h2>
-      <span>(0, 0)</span>
+      <span>(118, 375)</span>
       <ul style="padding-left: 1em">
         <li style="color: steelblue">letter: B</li>
         <li style="color: steelblue">frequency: 0.01492</li>

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html
@@ -1,11 +1,11 @@
 <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;"
+  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: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <dv>
     <h2>A</h2>
-    <span>(0, 0)</span>
+    <span>(98, 275)</span>
     <ul style="padding-left: 1em">
       <li style="color: steelblue">letter: A</li>
       <li style="color: steelblue">frequency: 0.08167</li>

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html
@@ -1,11 +1,11 @@
 <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;"
+  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: 128.8908045238724px; top: 385.56479294599274px;"
 >
   <dv>
     <h2>B</h2>
-    <span>(0, 0)</span>
+    <span>(118, 375)</span>
     <ul style="padding-left: 1em">
       <li style="color: steelblue">letter: B</li>
       <li style="color: steelblue">frequency: 0.01492</li>

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html
@@ -1,7 +1,7 @@
 <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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-multi-field/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-multi-field/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-null-items/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-null-items/step0.html
@@ -1,7 +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;"
+  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: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html
@@ -1,7 +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;"
+  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: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"

diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step0.html
@@ -1,7 +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;"
+  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: 243.0457136549436px; top: 314.9511143062545px;"
 >
   <div>
     <h2>B</h2>