From 3b20b8252e85f7bb0ccbeb309f9650d9acdeca66 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sun, 6 Nov 2022 20:38:09 +0800
Subject: [PATCH] fix(tooltip): fix tooltip arrow may cover the content when
 border is wide.

---
 src/component/tooltip/TooltipHTMLContent.ts |  2 +-
 test/runTest/actions/__meta__.json          |  1 +
 test/runTest/actions/tooltip-domnode.json   |  1 +
 test/tooltip-domnode.html                   | 28 +++++++++++++++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 test/runTest/actions/tooltip-domnode.json

diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index baca229954..02496857b0 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -93,7 +93,7 @@ function assembleArrow(
 
     const borderStyle = `${borderColor} solid ${borderWidth}px;`;
     const styleCss = [
-        `position:absolute;width:${arrowSize}px;height:${arrowSize}px;`,
+        `position:absolute;width:${arrowSize}px;height:${arrowSize}px;z-index:-1;`,
         `${positionStyle};${transformStyle};`,
         `border-bottom:${borderStyle}`,
         `border-right:${borderStyle}`,
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index a72207f78b..539e934384 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -188,6 +188,7 @@
   "tooltip-axisPointer2": 2,
   "tooltip-cascade": 4,
   "tooltip-component": 6,
+  "tooltip-domnode": 1,
   "tooltip-event": 1,
   "tooltip-link": 2,
   "tooltip-rich": 1,
diff --git a/test/runTest/actions/tooltip-domnode.json b/test/runTest/actions/tooltip-domnode.json
new file mode 100644
index 0000000000..af560a9435
--- /dev/null
+++ b/test/runTest/actions/tooltip-domnode.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":593,"x":436,"y":371},{"type":"mousemove","time":792,"x":433,"y":361},{"type":"screenshot","time":1688}],"scrollY":1726,"scrollX":0,"timestamp":1667738018652}]
\ No newline at end of file
diff --git a/test/tooltip-domnode.html b/test/tooltip-domnode.html
index dc53d02e69..d79c1f7f1e 100644
--- a/test/tooltip-domnode.html
+++ b/test/tooltip-domnode.html
@@ -36,6 +36,7 @@
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
+        <div id="main4"></div>
         <script>
             require(['echarts'/*, 'map/js/china' */], function (echarts) {
                 var option;
@@ -158,5 +159,32 @@
             });
         </script>
 
+        <script>
+            require(['echarts'], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44], [55, 66]]
+                    },
+                    tooltip: {
+                        position: 'top',
+                        borderWidth: 40,
+                        formatter: '{a}<br>Data is {c}'
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main4', {
+                    title: [
+                        'Tooltip arrow shouldn\'t cover the content',
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
     </body>
 </html>