diff --git a/__tests__/integration/api-chart-emit-item-tooltip.spec.ts b/__tests__/integration/api-chart-emit-item-tooltip.spec.ts
index 7a26044213..edab11a187 100644
--- a/__tests__/integration/api-chart-emit-item-tooltip.spec.ts
+++ b/__tests__/integration/api-chart-emit-item-tooltip.spec.ts
@@ -22,13 +22,13 @@ describe('chart.emit', () => {
 
     // chart.emit("tooltip:show", options) should show tooltip.
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
-      selector: '.tooltip',
+      selector: '.g2-tooltip',
     });
 
     // chart.emit("tooltip:hide") should hide tooltip.
     chart.emit('tooltip:hide');
     await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
-      selector: '.tooltip',
+      selector: '.g2-tooltip',
     });
 
     chart.off();
diff --git a/__tests__/integration/api-chart-emit-pie-tooltip.spec.ts b/__tests__/integration/api-chart-emit-pie-tooltip.spec.ts
index 291d07c5f1..96ea3f97be 100644
--- a/__tests__/integration/api-chart-emit-pie-tooltip.spec.ts
+++ b/__tests__/integration/api-chart-emit-pie-tooltip.spec.ts
@@ -17,7 +17,7 @@ describe('chart.emit', () => {
 
     // chart.emit("tooltip:show", options) should show tooltip.
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
-      selector: '.tooltip',
+      selector: '.g2-tooltip',
     });
   });
 
diff --git a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
index 7833deb7bc..eea4c885e8 100644
--- a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
+++ b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
@@ -23,13 +23,13 @@ describe('chart.emit', () => {
 
     // chart.emit("tooltip:show", options) should show tooltip.
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
-      selector: '.tooltip',
+      selector: '.g2-tooltip',
     });
 
     // chart.emit("tooltip:hide") should hide tooltip.
     chart.emit('tooltip:hide');
     await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
-      selector: '.tooltip',
+      selector: '.g2-tooltip',
     });
 
     chart.off();
diff --git a/__tests__/integration/api-mark-change-data-tooltip.spec.ts b/__tests__/integration/api-mark-change-data-tooltip.spec.ts
index 5cd8aa6659..2fc7078cfa 100644
--- a/__tests__/integration/api-mark-change-data-tooltip.spec.ts
+++ b/__tests__/integration/api-mark-change-data-tooltip.spec.ts
@@ -30,7 +30,7 @@ describe('mark.changeData tooltip', () => {
       }),
     );
     await expect(canvas).toMatchDOMSnapshot(dir, render.name, {
-      selector: `.tooltip`,
+      selector: '.g2-tooltip',
     });
   });
 
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 f15473bf69..ac87d9f51c 100644
--- a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 226.7156883688534px; top: 380.10715157645086px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Strategy
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="sold"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="115"
         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;"
       >
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 6e556feefa..33a7921a5a 100644
--- a/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 226.7156883688534px; top: 380.10715157645086px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Strategy
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="sold"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="115"
         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;"
       >
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 a6716d8807..73591a9606 100644
--- a/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 432.4999842680868px; top: 166.8005px;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="sold"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="275"
         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;"
       >
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 ba61791da5..d2d9bdd24d 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 454.78197172373046px; top: 241.0857864376269px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Tue, 16 Nov 2010 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="300.5"
         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;"
       >
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 0192756a69..ee0490cbde 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 454.78197172373046px; top: 241.0857864376269px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Tue, 16 Nov 2010 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="300.5"
         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;"
       >
diff --git a/__tests__/integration/snapshots/api/markChangeDataTooltip.html b/__tests__/integration/snapshots/api/markChangeDataTooltip.html
index f6b4cca4ba..2368148588 100644
--- a/__tests__/integration/snapshots/api/markChangeDataTooltip.html
+++ b/__tests__/integration/snapshots/api/markChangeDataTooltip.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     test2
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="11"
         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;"
       >
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 a45e4b4c89..78227eef6f 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Thu, 10 Jan 2008 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: black; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="NaN"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step0.html
index 47e433703a..3d5e7ddc04 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 60px; top: 210px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Sun, 13 May 2007 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="109.36"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step1.html b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step1.html
index c334c6681e..96fba7c782 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step1.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 210px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 13 Feb 2012 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="509.46"
         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;"
       >
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 7cc3adc376..3861155e3d 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Fri, 06 May 2011 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="346.66"
         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;"
       >
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 8e9ce06630..e4f9cbb6bf 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/step1.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-slider-filter/step1.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="94.37"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
index adf263f3c1..1f2231b7d8 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Thu, 11 Sep 2008 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="148.94"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html b/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html
index ff408a2477..b67249f834 100644
--- a/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl2-candlestick-chart/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Fri, 17 Nov 2017 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: black; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="low"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="169.64"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(228, 26, 28); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="close"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="170.15"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(228, 26, 28); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="open"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="171.04"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: black; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="high"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="171.39"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html
index f6e1a70357..6ed871f074 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
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 6c5a8e9dcf..0ea9468944 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step0.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
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 65f0122e35..0b4db104cb 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-dom/step1.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
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 75e848984d..6ad871c34f 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step0.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <dv>
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 34523f5e81..3d8542e07c 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-custom-string/step1.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <dv>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html
index a79428536e..433ec55fa0 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     steelblue
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="letter"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="A"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
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 e3ee1df8a7..bcaf417741 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-multi-field/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-multi-field/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="letter"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="A"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html
index e3ee1df8a7..bcaf417741 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-multi/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="letter"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="A"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
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 d980bbffca..b77a3619b1 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-null-items/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-null-items/step0.html
@@ -1,16 +1,16 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   />
 </div>;
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html
index a64c1aa7ee..5710ef549a 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-object/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: red; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="F"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: yellow; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="L"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="A"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html
index a8885cb062..4904d68eb7 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-title/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     0.08167
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
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 f7ff97fafb..a508da5df7 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,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
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 22cb338daf..1bf85aacbb 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,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html
index f6e1a70357..6ed871f074 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval1d-mounted/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html
index f6e1a70357..6ed871f074 100644
--- a/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html
+++ b/__tests__/integration/snapshots/tooltip/alphabet-interval1d/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     A
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="frequency"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/body-point2d/step0.html b/__tests__/integration/snapshots/tooltip/body-point2d/step0.html
index 84b5819781..f1378c3496 100644
--- a/__tests__/integration/snapshots/tooltip/body-point2d/step0.html
+++ b/__tests__/integration/snapshots/tooltip/body-point2d/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     female
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="height"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="161.2"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="weight"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="51.6"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html b/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html
index 20fc2a90f4..2a84f40d53 100644
--- a/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html
+++ b/__tests__/integration/snapshots/tooltip/cars3-line-xd/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     8
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="economy (mpg)"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="13"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="cylinders"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="8"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="displacement (cc)"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="360"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="power (hp)"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="175"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="weight (lb)"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="3821"
         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;"
       >
@@ -159,20 +159,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="5"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="0-60 mph (s)"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -180,7 +180,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="11"
         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;"
       >
@@ -188,20 +188,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="6"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 48, 5); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="year"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -209,7 +209,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="73"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html b/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html
index abcde53b97..8c3b12763e 100644
--- a/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html
+++ b/__tests__/integration/snapshots/tooltip/cassette-area-series/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Sat, 01 Jan 1977 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="8 - Track"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="14.7691k"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="LP/EP"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="11.3476k"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Other Tapes"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="14.7691k"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Vinyl Single"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="2.08702k"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Cassette"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.053k"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html
index cb8e619d3c..6493eb0da4 100644
--- a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Agricultural 'waste'
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(78, 121, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="124.729"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html
index 1cc26a70dd..b98a23f679 100644
--- a/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/energy-sankey-custom/step1.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(255, 157, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="source"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="Pumped heat"
         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;"
       >
@@ -37,20 +37,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(255, 157, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="target"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -58,7 +58,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="Heating and cooling - homes"
         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;"
       >
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 cce7afa931..63c9c236de 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     flare
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(163, 245, 207); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="956129"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html
index d7a453a258..28b0170ea2 100644
--- a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     flare
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(0, 0, 0); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="956129"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html
index a6b934ebe3..80a9440a3b 100644
--- a/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/flare-tree-custom/step1.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(153, 153, 153); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="source"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="flare"
         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;"
       >
@@ -37,20 +37,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(153, 153, 153); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="target"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -58,7 +58,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="flex"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html b/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html
index 982549e381..03f168882f 100644
--- a/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html
+++ b/__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     flare.vis.Visualization
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(78, 121, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="16540"
         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;"
       >
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 8712a9dfc3..440aad8318 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,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.45231138640967"
         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;"
       >
@@ -37,20 +37,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(255, 107, 59); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -58,7 +58,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.83852277548915"
         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;"
       >
@@ -66,20 +66,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: orange; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -87,7 +87,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.328739731259988"
         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;"
       >
@@ -95,20 +95,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: orange; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -116,7 +116,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.62978411402078"
         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;"
       >
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 42e1ff1ee2..24378bffe7 100644
--- a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.89441218858635"
         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;"
       >
@@ -37,20 +37,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(255, 107, 59); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -58,7 +58,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.30182293816554"
         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;"
       >
@@ -66,20 +66,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: orange; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -87,7 +87,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="-0.0632578758817437"
         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;"
       >
@@ -95,20 +95,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: orange; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="y1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -116,7 +116,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.790173258069052"
         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;"
       >
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 319d99a85f..0e74e4315b 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Fri, 20 Sep 2013 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="66.772858"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="316.339996"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="448.637054"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="190.020004"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="32.790001"
         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;"
       >
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 b7bcac7ac2..ad2a31d35a 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-chart-facet/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 17 Apr 2017 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="141.830002"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="901.98999"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="837.169983"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="171.100006"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="65.480003"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
index 7c90e788fe..99986b353f 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
index 4f71df20ba..877a770d36 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
@@ -1,6 +1,6 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html
index 9a0d13e2a0..63570e7157 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-formatter/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     2014
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="332.551"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="558.271"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="182.304"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="92.2647"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="42.4535"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
index b122835062..8556729261 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 02 Jun 2014 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.2"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.2"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.4"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.3"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.9"
         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;"
       >
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 54bb7fa658..484c99abbe 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Tue, 14 May 2013 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="268.329987"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="63.408573"
         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;"
       >
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 d38aad4025..e85be78b4a 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-point-reverse/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Fri, 24 May 2013 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="261.73999"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="63.592857"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
index 4cfed4c42c..349cfc2bb0 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Tue, 27 Aug 2013 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="280.929993"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="422.328156"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="182.740005"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="69.798569"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="33.259998"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
index 6dd9f584ee..666dbea050 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 20 Jun 2016 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="714.01001"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="693.710022"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="153.610001"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="95.099998"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="50.07"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
index 93dcb5ed97..fd5998e3de 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 28 Oct 2013 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="358.160004"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="504.22052"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="177.350006"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="75.697144"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="35.57"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/indices-line/step0.html b/__tests__/integration/snapshots/tooltip/indices-line/step0.html
index ec48bdbad7..fbb65e86ba 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Mon, 02 Jun 2014 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AMZN"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.167592848376513"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="MSFT"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.2349380028742962"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="AAPL"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.3824382731917897"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="GOOG"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.2637379241764328"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="IBM"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.9171235298210918"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html b/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html
index d891dfd795..f2d2681677 100644
--- a/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html
+++ b/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="220"
         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;"
       >
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 b9f5a8a037..c9b1ba6fa0 100644
--- a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step0.html
+++ b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step0.html
@@ -1,16 +1,16 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Kingston upon Thames
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   />
 </div>;
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 7631d6cc99..ba18c0146c 100644
--- a/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step1.html
+++ b/__tests__/integration/snapshots/tooltip/london-tube-line-geo/step1.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(29, 33, 41); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="cx"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="-0.34127462993183943"
         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;"
       >
@@ -37,20 +37,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(29, 33, 41); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="cy"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -58,7 +58,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="51.59771852185307"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html
index 3034d658da..319180021d 100644
--- a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step0.html
@@ -1,27 +1,27 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(0, 0, 0); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="source"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -29,7 +29,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="Structural basis of PROTAC cooperative recognition for selective protein degradation."
         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;"
       >
@@ -38,20 +38,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(0, 0, 0); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="target"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -59,7 +59,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="109-294-662-661-65X"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html
index daf0b2ca93..b488bd33f6 100644
--- a/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/miserable-force-custom/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Cited Works
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(78, 121, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="key"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="Structural basis of PROTAC cooperative recognition for selective protein degradation."
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
index 7d03c7466f..79fae8743a 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     北京
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="null"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
index d5d37285e0..4877988b42 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     河北
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
index 0dd86785e7..1dee63ed70 100644
--- a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
+++ b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     海南
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="undefined"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html b/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html
index d3691d2c71..43528688a9 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1070
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="min"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="740"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="850"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q2"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="940"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q3"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="980"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: red; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="max"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1070"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html b/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html
index 1a6b95448f..7fe1db6a48 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-channel/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     650
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(0, 0, 0); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Expt"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1"
         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;"
       >
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 d2e1956614..0f3b33fbde 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default-extend/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default-extend/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="min"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="650"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="850"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q2"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="940"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q3"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="980"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="max"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1070"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html b/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html
index 605496dc56..b519a271c2 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="min"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="740"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="850"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q2"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="940"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q3"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="980"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="max"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1070"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html b/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html
index 93da31798a..bc345d776c 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box-default/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(0, 0, 0); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="outlier"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="650"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/morley-box/step0.html b/__tests__/integration/snapshots/tooltip/morley-box/step0.html
index b559fdb8f3..0828e20bdf 100644
--- a/__tests__/integration/snapshots/tooltip/morley-box/step0.html
+++ b/__tests__/integration/snapshots/tooltip/morley-box/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="min"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.74k"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.85k"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q2"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.94k"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="q3"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.98k"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: red; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="max"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.07k"
         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;"
       >
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 f14e4a9fef..aea2ed5da2 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Wed, 01 Jan 1800 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Kentucky"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="4.16%"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Tennessee"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.99%"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Delaware"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.21%"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="West Virginia"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.48%"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="South Carolina"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="6.51%"
         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;"
       >
@@ -159,20 +159,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="5"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Maryland"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -180,7 +180,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="6.43%"
         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;"
       >
@@ -188,20 +188,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="6"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Georgia"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -209,7 +209,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="3.06%"
         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;"
       >
@@ -217,20 +217,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="7"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Virginia"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -238,7 +238,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="15.21%"
         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;"
       >
@@ -246,20 +246,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="8"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="North Carolina"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -267,7 +267,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="9.01%"
         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;"
       >
@@ -275,20 +275,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="9"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="New Jersey"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -296,7 +296,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="3.98%"
         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;"
       >
@@ -304,20 +304,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="10"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Pennsylvania"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -325,7 +325,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="11.35%"
         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;"
       >
@@ -333,20 +333,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="11"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="New York"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -354,7 +354,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="11.10%"
         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;"
       >
@@ -362,20 +362,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="12"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Vermont"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -383,7 +383,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="2.91%"
         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;"
       >
@@ -391,20 +391,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="13"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="New Hampshire"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -412,7 +412,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="3.46%"
         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;"
       >
@@ -420,20 +420,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="14"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Rhode Island"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -441,7 +441,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1.30%"
         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;"
       >
@@ -449,20 +449,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="15"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Maine"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -470,7 +470,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="2.86%"
         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;"
       >
@@ -478,20 +478,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="16"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Connecticut"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -499,7 +499,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="4.73%"
         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;"
       >
@@ -507,20 +507,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="17"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Massachusetts"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -528,7 +528,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="7.97%"
         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;"
       >
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 7b0e5071af..4cbaf67edd 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Jan.
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="end"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="387264"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="start"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0"
         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;"
       >
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 f2a38db1bf..1f1b75dc5b 100644
--- a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
+++ b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     3
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="number"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="244"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="province"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="四川省"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="sub_type"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="xx"
         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;"
       >
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 000ba3250b..6c082c3dcb 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,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Support
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="a"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="30"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="b"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="40"
         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;"
       >
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 0560a2a6e4..7613121118 100644
--- a/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/step0.html
+++ b/__tests__/integration/snapshots/tooltip/seattle-weather-interval-aggregated/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     0
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(174, 199, 232); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="count"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="124"
         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;"
       >
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 3e475e61f0..20705f7700 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-normalized/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     AL
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="population"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.12362274857864762"
         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;"
       >
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 32b4f06d84..05aff06893 100644
--- a/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/step0.html
+++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-shared/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     CA
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="&lt;10"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5038433"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="10-19"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5170341"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="20-29"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5809455"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="30-39"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5354112"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="40-49"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5179258"
         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;"
       >
@@ -159,20 +159,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="5"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(109, 200, 236); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="50-59"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -180,7 +180,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="5042094"
         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;"
       >
@@ -188,20 +188,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="6"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(148, 95, 185); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="60-69"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -209,7 +209,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="3737461"
         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;"
       >
@@ -217,20 +217,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="7"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(255, 152, 69); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="70-79"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -238,7 +238,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="2011678"
         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;"
       >
@@ -246,20 +246,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="8"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(30, 148, 147); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="≥80"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -267,7 +267,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1311374"
         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;"
       >
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 e20d059eab..2eada781bf 100644
--- a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step0.html
+++ b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     2000-02-03
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="foo1"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="34"
         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;"
       >
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 dcdc92d36d..596261c323 100644
--- a/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html
+++ b/__tests__/integration/snapshots/tooltip/symbols-line-missing-data/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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: 410px; top: 310px;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     2000-02-04
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="foo2"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="31"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
index d41b7eaf33..2ed2603750 100644
--- a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Fri, 02 Dec 2011 00:00:00 GMT
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: red; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="62.2"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html b/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html
index 79c669f9cf..49f588cc18 100644
--- a/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperatures-line-discrete/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Apr
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Tokyo"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="14.5"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="London"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="8.5"
         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;"
       >
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 79c669f9cf..49f588cc18 100644
--- a/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperatures-line-point-discrete/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Apr
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Tokyo"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="14.5"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="London"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="8.5"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html b/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html
index 19f4da6b03..de89cafc35 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment-area-stack/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Invalid Date
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(222, 207, 234); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Mining and Extraction"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="28"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(148, 95, 185); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Agriculture"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="269"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(211, 238, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Information"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="266"
         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;"
       >
@@ -101,20 +101,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="3"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(109, 200, 236); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Transportation and Utilities"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -122,7 +122,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="313"
         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;"
       >
@@ -130,20 +130,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="4"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(211, 206, 253); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Other"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -151,7 +151,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="314"
         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;"
       >
@@ -159,20 +159,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="5"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(111, 94, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Self-employed"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -180,7 +180,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="217"
         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;"
       >
@@ -188,20 +188,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="6"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(252, 235, 185); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Finance"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -209,7 +209,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="287"
         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;"
       >
@@ -217,20 +217,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="7"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(246, 189, 22); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Government"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -238,7 +238,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="477"
         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;"
       >
@@ -246,20 +246,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="8"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(206, 212, 222); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Education and Health"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -267,7 +267,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="540"
         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;"
       >
@@ -275,20 +275,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="9"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(93, 112, 146); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Construction"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -296,7 +296,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1009"
         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;"
       >
@@ -304,20 +304,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="10"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(205, 243, 228); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Business services"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -325,7 +325,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="964"
         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;"
       >
@@ -333,20 +333,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="11"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Leisure and hospitality"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -354,7 +354,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="976"
         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;"
       >
@@ -362,20 +362,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="12"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(205, 221, 253); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Manufacturing"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -383,7 +383,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1367"
         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;"
       >
@@ -391,20 +391,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="13"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Wholesale and Retail Trade"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -412,7 +412,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="1269"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html b/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html
index ebedf1882a..453cfb3081 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment-choropleth/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     22051
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(218, 241, 180); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="rate"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.065"
         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;"
       >
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 a0e048a676..893dc942d4 100644
--- a/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/step0.html
+++ b/__tests__/integration/snapshots/tooltip/unemployment2-rect-bin-x/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     5, 5.5
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="count"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="380"
         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;"
       >
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 25bff00ce2..f853f2e845 100644
--- a/__tests__/integration/snapshots/tooltip/value-area-line-unique/step0.html
+++ b/__tests__/integration/snapshots/tooltip/value-area-line-unique/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     1993
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="value"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="15900"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html b/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html
index 103d0c54a7..f0aaf37190 100644
--- a/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html
+++ b/__tests__/integration/snapshots/tooltip/weather-line-interval/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     May
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(145, 204, 117); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Precipitation"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="28.7"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(238, 102, 102); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Temperature"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="6.3"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html b/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html
index ad8784adb9..a401d14a62 100644
--- a/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html
+++ b/__tests__/integration/snapshots/tooltip/weather-line-interval/step1.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     Jun
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(145, 204, 117); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Precipitation"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="70.7"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(238, 102, 102); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Temperature"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="10.2"
         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;"
       >
@@ -72,20 +72,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="2"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(84, 112, 198); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="Evaporation"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -93,7 +93,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="76.7"
         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;"
       >
diff --git a/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html b/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html
index 6e00064d58..6f198306b1 100644
--- a/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html
+++ b/__tests__/integration/snapshots/tooltip/wind-vector-wind/step0.html
@@ -1,33 +1,33 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
-  class="tooltip"
+  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;"
 >
   <div
-    class="tooltip-title"
+    class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
     3.1189485109180706
   </div>
   <ul
-    class="tooltip-list"
+    class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"
   >
     <li
-      class="tooltip-list-item"
+      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="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(58, 83, 139); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="longitude"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -35,7 +35,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="0.125"
         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;"
       >
@@ -43,20 +43,20 @@
       </span>
     </li>
     <li
-      class="tooltip-list-item"
+      class="g2-tooltip-list-item"
       data-index="1"
       style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
     >
       <span
-        class="tooltip-list-item-name"
+        class="g2-tooltip-list-item-name"
         style="display: flex; align-items: center; max-width: 216px;"
       >
         <span
-          class="tooltip-list-item-marker"
+          class="g2-tooltip-list-item-marker"
           style="background: rgb(58, 83, 139); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
         />
         <span
-          class="tooltip-list-item-name-label"
+          class="g2-tooltip-list-item-name-label"
           title="latitude"
           style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
         >
@@ -64,7 +64,7 @@
         </span>
       </span>
       <span
-        class="tooltip-list-item-value"
+        class="g2-tooltip-list-item-value"
         title="45.125"
         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;"
       >
diff --git a/__tests__/integration/spec-tooltip.spec.ts b/__tests__/integration/spec-tooltip.spec.ts
index be6b7ede9a..f948cae95d 100644
--- a/__tests__/integration/spec-tooltip.spec.ts
+++ b/__tests__/integration/spec-tooltip.spec.ts
@@ -22,7 +22,7 @@ describe('Tooltips', () => {
         }
 
         // @ts-ignore
-        const { className = 'tooltip' } = generateOptions;
+        const { className = 'g2-tooltip' } = generateOptions;
         // @ts-ignore
         generateOptions.preprocess = disableAnimation;
 
diff --git a/package.json b/package.json
index 4ff816efdc..1b3f912a07 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "@antv/g": "^5.7.4",
     "@antv/g-canvas": "^1.7.4",
     "@antv/g-plugin-dragndrop": "^1.6.1",
-    "@antv/gui": "^0.5.0-alpha.18",
+    "@antv/gui": "^0.5.0-alpha.22",
     "@antv/path-util": "^3.0.1",
     "@antv/scale": "^0.4.7",
     "@antv/util": "^3.3.2",
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index 7cabab8d90..23ea950950 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -75,9 +75,12 @@ function createTooltip(
       enterable,
       title: '',
       offset: [10, 10],
+      template: {
+        prefixCls: 'g2-',
+      },
       style: {
-        '.tooltip': {},
-        '.tooltip-title': {
+        '.g2-tooltip': {},
+        '.g2-tooltip-title': {
           overflow: 'hidden',
           'white-space': 'nowrap',
           'text-overflow': 'ellipsis',