diff --git a/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step1.html
index 54d4e0667e..f8d785e1dd 100644
--- a/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-click-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: 151.37882443622763px; top: 271.67857142857144px;"
+  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: sans-serif; left: 151.37882443622763px; top: 271.67857142857144px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step2.html b/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step2.html
index 1b76683f5b..b5f480cf16 100644
--- a/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step2.html
+++ b/__tests__/integration/snapshots/api/chart-emit-click-tooltip/step2.html
@@ -1,7 +1,7 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: hidden; 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: 151.37882443622763px; top: 271.67857142857144px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; 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: sans-serif; left: 151.37882443622763px; top: 271.67857142857144px;"
 >
   <div
     class="g2-tooltip-title"
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
index cd6c7cf29a..d311382d86 100644
--- 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: 120.68277500777992px; top: 208.92771362586603px;"
+  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: sans-serif; left: 120.68277500777992px; top: 208.92771362586603px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html
index 3ae7ff76f8..190e4cdf58 100644
--- a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-item-tooltip/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: 257.44941265568264px; top: 350.99285714285713px;"
+  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: sans-serif; left: 257.44941265568264px; top: 350.99285714285713px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html
index 7367520bf6..c775a43364 100644
--- a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-item-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: hidden; 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: 257.44941265568264px; top: 350.99285714285713px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; 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: sans-serif; left: 257.44941265568264px; top: 350.99285714285713px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html
index 37bef92d07..096fdf0c52 100644
--- a/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/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: 433.2497979290697px; top: 178.6549997329712px;"
+  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: sans-serif; left: 433.2497979290697px; top: 178.6549997329712px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
index 68fd3548d8..a71500234c 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/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: 475.8211855528594px; top: 215.5857864376269px;"
+  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: sans-serif; left: 475.8211855528594px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
index 4cff9d7d07..5a5f7e2cf2 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-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: hidden; 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: 475.8211855528594px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; 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: sans-serif; left: 475.8211855528594px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/markChangeDataTooltip.html b/__tests__/integration/snapshots/api/markChangeDataTooltip.html
index 7603f5d9f4..43f35a443b 100644
--- a/__tests__/integration/snapshots/api/markChangeDataTooltip.html
+++ b/__tests__/integration/snapshots/api/markChangeDataTooltip.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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html b/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
index f38fce6558..d5cd8d0ff3 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/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: 110px; top: 98px;"
+  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: sans-serif; left: 110px; top: 98px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample/step0.html
index abfa57c46d..be10e72e7c 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample/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: 510px; top: 210px;"
+  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: sans-serif; left: 510px; top: 210px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html
index 727cbc11b2..f704c3748b 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html
index af8688fed0..c139d8fb14 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/step1.html b/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/step1.html
index 43dfb23b3b..b902161663 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/step1.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
index af8688fed0..c139d8fb14 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <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
index 05299ed3dc..b995023b00 100644
--- 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: 91.23999786376953px; top: 215.00100578146174px;"
+  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: sans-serif; 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
index 8edf9cb862..93acdcdd43 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index 2f9eab9d76..c71af9abbc 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/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: 108.31609192782568px; top: 285.1928042827901px;"
+  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: sans-serif; left: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <div>
     <dv>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html
index c40a83430b..81a6835688 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/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: 128.8908045238724px; top: 385.56479294599274px;"
+  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: sans-serif; left: 128.8908045238724px; top: 385.56479294599274px;"
 >
   <div>
     <dv>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html
index 8e0baa639e..2bf1c37c7e 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/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: 108.31609192782568px; top: 285.1928042827901px;"
+  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: sans-serif; left: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <dv>
     <h2>A</h2>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html
index c1fd542b35..5a7c2220a1 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/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: 128.8908045238724px; top: 385.56479294599274px;"
+  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: sans-serif; left: 128.8908045238724px; top: 385.56479294599274px;"
 >
   <dv>
     <h2>B</h2>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html
deleted file mode 100644
index ef6d38a4e9..0000000000
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<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: 38.812260536398455px; top: 329.97480711698944px;"
->
-  <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>
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html
index 282f811d53..191e25a0d5 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index 9348d5e2c1..f914ce209c 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index 9348d5e2c1..f914ce209c 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index 40127b3237..4e84ac66ba 100644
--- 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: 108.31609192782568px; top: 285.1928042827901px;"
+  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: sans-serif; 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
index 4445009706..064e77f62f 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index aa5c12a8b5..22a9ea5340 100644
--- 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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; 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
index 4fe68828ff..419bc79cc7 100644
--- 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: 243.0457136549436px; top: 314.9511143062545px;"
+  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: sans-serif; left: 243.0457136549436px; top: 314.9511143062545px;"
 >
   <div>
     <h2>B</h2>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step1.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step1.html
index 4fe68828ff..419bc79cc7 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step1.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/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: 243.0457136549436px; top: 314.9511143062545px;"
+  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: sans-serif; left: 243.0457136549436px; top: 314.9511143062545px;"
 >
   <div>
     <h2>B</h2>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html
index 1b9f47c1e2..7f78305c68 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/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: 108.31609192782568px; top: 285.1928042827901px;"
+  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: sans-serif; left: 108.31609192782568px; top: 285.1928042827901px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html
index 8edf9cb862..93acdcdd43 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval1d/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: 38.812260536398455px; top: 329.97480711698944px;"
+  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: sans-serif; left: 38.812260536398455px; top: 329.97480711698944px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html
index d6d4b6e5c7..c73ef41049 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-text/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: 111.4669271850586px; top: 163.18482971191406px;"
+  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: sans-serif; left: 111.4669271850586px; top: 163.18482971191406px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/body-point2d/step0.html b/__tests__/integration/snapshots/tooltip/body-point2d/step0.html
index 2cd00dde0c..85e041c8a6 100644
--- a/__tests__/integration/snapshots/tooltip/body-point2d/step0.html
+++ b/__tests__/integration/snapshots/tooltip/body-point2d/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: 193.22986247544202px; top: 416.19354838709677px;"
+  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: sans-serif; left: 193.22986247544202px; top: 416.19354838709677px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html b/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html
index bfbc16a23a..2167ab145d 100644
--- a/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html
+++ b/__tests__/integration/snapshots/tooltip/cars3-line-xd/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: 362.3404999999999px; top: 450.5px;"
+  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: sans-serif; left: 362.3404999999999px; top: 450.5px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html b/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html
index 0a11fac8b4..dffef7fff8 100644
--- a/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html
+++ b/__tests__/integration/snapshots/tooltip/cassette-area-series/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/disasters-point-slider/step0.html b/__tests__/integration/snapshots/tooltip/disasters-point-slider/step0.html
index d14cdf119c..96f2427d8b 100644
--- a/__tests__/integration/snapshots/tooltip/disasters-point-slider/step0.html
+++ b/__tests__/integration/snapshots/tooltip/disasters-point-slider/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: 124.14999521439607px; top: 71.8px;"
+  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: sans-serif; left: 124.14999521439607px; top: 71.8px;"
 >
   <h1 style="display:block; height: 100px; width: 100px">tooltip</h1>
 </div>
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html
index acd3fd3d01..ea4cf42dc9 100644
--- a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/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: 44.480000000000004px; top: 126.41172478605215px;"
+  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: sans-serif; left: 44.480000000000004px; top: 126.41172478605215px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html
index c23cb8aae0..31f4afa539 100644
--- a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/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: 578.7199999999999px; top: 314.40513899426537px;"
+  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: sans-serif; left: 578.7199999999999px; top: 314.40513899426537px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/flare-point-circle-pack-custom/step0.html b/__tests__/integration/snapshots/tooltip/flare-point-circle-pack-custom/step0.html
index 4dd7431523..26d3229b01 100644
--- a/__tests__/integration/snapshots/tooltip/flare-point-circle-pack-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/flare-point-circle-pack-custom/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: 510px; top: 510px;"
+  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: sans-serif; left: 510px; top: 510px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html
index 3a478fe592..c5c6bbd305 100644
--- a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/flare-tree-custom/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html
index f1d4054276..32f05ca673 100644
--- a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/flare-tree-custom/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: sans-serif; left: 10px; top: 10px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html b/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html
index 31c0b01a5c..5e3388d4dc 100644
--- a/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html
+++ b/__tests__/integration/snapshots/tooltip/flare-treemap-default/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: 333.943538051209px; top: 511.3148455507031px;"
+  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: sans-serif; left: 333.943538051209px; top: 511.3148455507031px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/forecast-range-area-line-transpose/step0.html b/__tests__/integration/snapshots/tooltip/forecast-range-area-line-transpose/step0.html
index f616182f7f..3eee3d62ed 100644
--- a/__tests__/integration/snapshots/tooltip/forecast-range-area-line-transpose/step0.html
+++ b/__tests__/integration/snapshots/tooltip/forecast-range-area-line-transpose/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: 250px; top: 310px;"
+  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: sans-serif; left: 250px; top: 310px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
index 3f0541361d..7d6267285c 100644
--- a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/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: 250px; top: 310px;"
+  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: sans-serif; left: 250px; top: 310px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step0.html
index 1737bd485a..160dfee7f7 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step1.html
index da83b2d163..770d0fda66 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/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: 510px; top: 310px;"
+  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: sans-serif; left: 510px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
index b1d61574bd..8fa6874bf8 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div>
     <dv>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
index aff2ee34cc..d0ecb3f375 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/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: 310px; top: 310px;"
+  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: sans-serif; left: 310px; top: 310px;"
 >
   <div>
     <dv>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html
index 4d73b94543..3dd4238fac 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-formatter/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
index 92c2724d77..f0adaa5023 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step0.html
index c44fc68496..f4996140c6 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step1.html
index 9201b459fe..4cb334f4ef 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/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: 510px; top: 310px;"
+  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: sans-serif; left: 510px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
index 31544220c9..d18dda221d 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
index 4f7bfa42b6..9329a307c6 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/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: 510px; top: 310px;"
+  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: sans-serif; left: 510px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
index df762689a9..3189faf2d0 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-series/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/indices-line/step0.html b/__tests__/integration/snapshots/tooltip/indices-line/step0.html
index 5f3ee34ebe..c335aee4f4 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html b/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html
index 42a64383c9..98899ce568 100644
--- a/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html
+++ b/__tests__/integration/snapshots/tooltip/languages-interval-stack/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: 415.544px; top: 354.5615px;"
+  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: sans-serif; left: 415.544px; top: 354.5615px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step0.html b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step0.html
index 7cafbee7fa..91764fe011 100644
--- a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step0.html
+++ b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/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: 259.1355px; top: 358.885px;"
+  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: sans-serif; left: 259.1355px; top: 358.885px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step1.html b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step1.html
index 0620327a14..f64678fd78 100644
--- a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step1.html
+++ b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/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: 234.67947570800783px; top: 171.63670349121094px;"
+  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: sans-serif; left: 234.67947570800783px; top: 171.63670349121094px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html
index 09301f0ae9..5ef49a8823 100644
--- a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/miserable-force-custom/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: sans-serif; left: 10px; top: 10px;"
 >
   <ul
     class="g2-tooltip-list"
diff --git a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html
index 65fed100a2..d22bcc8c0d 100644
--- a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/miserable-force-custom/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-dual-bar-share-tooltip/step0.html b/__tests__/integration/snapshots/tooltip/mock-dual-bar-share-tooltip/step0.html
index 258f7d145d..17028b5dbb 100644
--- a/__tests__/integration/snapshots/tooltip/mock-dual-bar-share-tooltip/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-dual-bar-share-tooltip/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-interval-shared/step1.html b/__tests__/integration/snapshots/tooltip/mock-interval-shared/step1.html
index 33567ce6fe..dd8a2ae93c 100644
--- a/__tests__/integration/snapshots/tooltip/mock-interval-shared/step1.html
+++ b/__tests__/integration/snapshots/tooltip/mock-interval-shared/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: 246.23428524198928px; top: 325.28922949461474px;"
+  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: sans-serif; left: 246.23428524198928px; top: 325.28922949461474px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
index 5f6c42b61e..24c1498d0a 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
index 74e9fa6bb8..966203cf2a 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/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: 285px; top: 310px;"
+  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: sans-serif; left: 285px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
index ffd94b7a94..6380d2db49 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.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: 430px; top: 310px;"
+  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: sans-serif; left: 430px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html b/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html
index 277ec6a4a4..4432937f5e 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-flex/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: 610px; top: 60px;"
+  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: sans-serif; left: 610px; top: 60px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html
index 9630be0c81..f756a5a043 100644
--- a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/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: 560px; top: 310px;"
+  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: sans-serif; left: 560px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html
index 152e5f58ff..b097b80731 100644
--- a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html
+++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/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: 155px; top: 310px;"
+  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: sans-serif; left: 155px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step0.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step0.html
index 9e692e0086..614ef05e72 100644
--- a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/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: 560px; top: 310px;"
+  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: sans-serif; left: 560px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step1.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step1.html
index 41a6f6e7c9..f005dc13ca 100644
--- a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step1.html
+++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest/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: 155px; top: 310px;"
+  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: sans-serif; left: 155px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html b/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html
index e48b8bfa7a..030c4a695c 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html b/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html
index 029616ef50..88183b9a97 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-channel/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-default-extend/step0.html b/__tests__/integration/snapshots/tooltip/morley-box-default-extend/step0.html
index 15e3cf4c33..87d22dd0c5 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default-extend/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default-extend/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: 161.22353240918642px; top: 204.66666666666666px;"
+  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: sans-serif; left: 161.22353240918642px; top: 204.66666666666666px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html b/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html
index 30e079d192..a61654a2f1 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html b/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html
index 96d43f2d0d..eb7e6c6347 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/morley-box/step0.html b/__tests__/integration/snapshots/tooltip/morley-box/step0.html
index b829a9fd57..4e192d9b03 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box/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: 156.51765005624523px; top: 166.0666666666667px;"
+  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: sans-serif; left: 156.51765005624523px; top: 166.0666666666667px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/movies-interval-scale-key-scrollbar/step0.html b/__tests__/integration/snapshots/tooltip/movies-interval-scale-key-scrollbar/step0.html
index 7a50374140..63e315a7bd 100644
--- a/__tests__/integration/snapshots/tooltip/movies-interval-scale-key-scrollbar/step0.html
+++ b/__tests__/integration/snapshots/tooltip/movies-interval-scale-key-scrollbar/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: 310px; top: 110px;"
+  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: sans-serif; left: 310px; top: 110px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/one-element-line/step0.html b/__tests__/integration/snapshots/tooltip/one-element-line/step0.html
index 6970395bf5..3e882ae453 100644
--- a/__tests__/integration/snapshots/tooltip/one-element-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/one-element-line/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: 210px; top: 210px;"
+  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: sans-serif; left: 210px; top: 210px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/population-by-state-area-normalize-stacked/step0.html b/__tests__/integration/snapshots/tooltip/population-by-state-area-normalize-stacked/step0.html
index 048acde0b1..c1a3973b87 100644
--- a/__tests__/integration/snapshots/tooltip/population-by-state-area-normalize-stacked/step0.html
+++ b/__tests__/integration/snapshots/tooltip/population-by-state-area-normalize-stacked/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: 110px; top: 310px;"
+  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: sans-serif; left: 110px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/step1.html b/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/step1.html
index 29eda2dd46..e859a55ab5 100644
--- a/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/step1.html
+++ b/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/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: 121.96000422871631px; top: 386.77047380903184px;"
+  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: sans-serif; left: 121.96000422871631px; top: 386.77047380903184px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
index 051f749e34..84b9a639b8 100644
--- a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
+++ b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/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: 460px; top: 310px;"
+  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: sans-serif; left: 460px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/score-by-item-area-radar/step0.html b/__tests__/integration/snapshots/tooltip/score-by-item-area-radar/step0.html
index 286f3ca99d..dc98346308 100644
--- a/__tests__/integration/snapshots/tooltip/score-by-item-area-radar/step0.html
+++ b/__tests__/integration/snapshots/tooltip/score-by-item-area-radar/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/step0.html b/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/step0.html
index 9b6050ab2c..70ed5fbdd4 100644
--- a/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/step0.html
+++ b/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/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: 115.79636636583137px; top: 76.40322580645162px;"
+  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: sans-serif; left: 115.79636636583137px; top: 76.40322580645162px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/step0.html
index 9ec6580c8b..853cc45a0a 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/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); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 0.25em !important; 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; background: rgb(238, 238, 238); left: 136.90848492370435px; top: 242.34922845602557px; background-color: rgba(255, 255, 255, 0.96);"
+  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); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 0.25em !important; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: sans-serif; background: rgb(238, 238, 238); left: 136.90848492370435px; top: 242.34922845602557px; background-color: rgba(255, 255, 255, 0.96);"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/step0.html
index 2ef778bcbe..db3f512719 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/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: 133.55273594483734px; top: 416.404990403071px;"
+  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: sans-serif; left: 133.55273594483734px; top: 416.404990403071px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html
index b5bf0be838..e68debc9cf 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/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: 149.4005671079344px; top: 232.15476219369975px;"
+  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: sans-serif; left: 149.4005671079344px; top: 232.15476219369975px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/step0.html
index 3937f77371..e34eb31b8b 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/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: 136.90848492370435px; top: 242.34922845602557px;"
+  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: sans-serif; left: 136.90848492370435px; top: 242.34922845602557px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step0.html b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step0.html
index 1f69bef1ba..84ea2532fb 100644
--- a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step0.html
+++ b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html
index ca4f772dc0..67ca1a1d80 100644
--- a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html
+++ b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html
@@ -1,7 +1,7 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: hidden; 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: 210px; top: 310px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; 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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
index e41d132495..466e19db13 100644
--- a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html b/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html
index 186fe430a7..bd5aacacf8 100644
--- a/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/step0.html b/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/step0.html
index 186fe430a7..bd5aacacf8 100644
--- a/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html b/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html
index d222e83627..76d5927269 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment-area-stack/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html b/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html
index 3fbdeba4e4..4608142761 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment-choropleth/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: sans-serif; left: 10px; top: 10px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/step0.html b/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/step0.html
index a976f1667d..1d2755903a 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/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: 174.3879987228198px; top: 241.1494252873563px;"
+  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: sans-serif; left: 174.3879987228198px; top: 241.1494252873563px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/value-area-line-unique/step0.html b/__tests__/integration/snapshots/tooltip/value-area-line-unique/step0.html
index 0171201d00..f91eab1a22 100644
--- a/__tests__/integration/snapshots/tooltip/value-area-line-unique/step0.html
+++ b/__tests__/integration/snapshots/tooltip/value-area-line-unique/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: 210px; top: 310px;"
+  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: sans-serif; left: 210px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html b/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html
index 2405094436..256465f354 100644
--- a/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html
+++ b/__tests__/integration/snapshots/tooltip/weather-line-interval/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: 310px; top: 310px;"
+  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: sans-serif; left: 310px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html b/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html
index bcb3ace590..bcb6fe2917 100644
--- a/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html
+++ b/__tests__/integration/snapshots/tooltip/weather-line-interval/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: 330px; top: 310px;"
+  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: sans-serif; left: 330px; top: 310px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html b/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html
index a6db751dff..1596357b62 100644
--- a/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html
+++ b/__tests__/integration/snapshots/tooltip/wind-vector-wind/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: 444.342785653016px; top: 508px;"
+  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: sans-serif; left: 444.342785653016px; top: 508px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/src/theme/create.ts b/src/theme/create.ts
index 0467b2e323..c43373bc63 100644
--- a/src/theme/create.ts
+++ b/src/theme/create.ts
@@ -434,5 +434,12 @@ export function create({
       subtitleFontWeight: 'normal',
       subtitleTextBaseline: 'top',
     },
+    tooltip: {
+      css: {
+        '.g2-tooltip': {
+          'font-family': 'sans-serif',
+        },
+      },
+    },
   };
 }