fix(tooltip): overflow (#5802)

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

@@ -39,7 +39,7 @@ describe('chart.emit', () => {
     const [tooltipShowed, resolveShow] = createPromise();
     chart.on('tooltip:show', (event) => {
       const { x } = event.data.data;
-      expect(x.toUTCString()).toBe('Sat, 23 Jun 2007 12:58:35 GMT');
+      expect(x.toUTCString()).toBe('Mon, 18 Jun 2007 17:47:35 GMT');
       resolveShow();
     });
     dispatchPlotEvent(canvas, 'pointermove', {

__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html

@@ -1,13 +1,13 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
 >
   <div
     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
+    Thu, 11 Nov 2010 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="300.5"
+        title="308.03"
         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;"
       >
-        300.5
+        308.03
       </span>
     </li>
   </ul>

__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html

@@ -1,13 +1,13 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
 >
   <div
     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
+    Thu, 11 Nov 2010 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="300.5"
+        title="308.03"
         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;"
       >
-        300.5
+        308.03
       </span>
     </li>
   </ul>

__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html

@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    2008-05-28 08:00:00
+    2008-05-22 08:00:00
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="186.69"
+        title="181.17"
         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;"
       >
-        186.69
+        181.17
       </span>
     </li>
   </ul>

__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 210px; top: 310px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Thu, 22 May 2008 00:00:00 GMT
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="181.17"
+        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;"
+      >
+        181.17
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/integration/snapshots/tooltip/aapl-line/step0.html

@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Wed, 28 May 2008 00:00:00 GMT
+    Thu, 22 May 2008 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="186.69"
+        title="181.17"
         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;"
       >
-        186.69
+        181.17
       </span>
     </li>
   </ul>