bug(tooltip): tooltip arrow will follow borderWidth. close #14373

src/component/tooltip/TooltipHTMLContent.ts

@@ -60,36 +60,47 @@ function mirrorPos(pos: string): string {
 }
 
 function assembleArrow(
-    backgroundColor: ColorString,
+    tooltipModel: Model<TooltipOption>,
     borderColor: ZRColor,
     arrowPosition: TooltipOption['position']
 ) {
     if (!isString(arrowPosition) || arrowPosition === 'inside') {
         return '';
     }
 
+    const backgroundColor = tooltipModel.get('backgroundColor');
+    const borderWidth = tooltipModel.get('borderWidth');
+
     borderColor = convertToColorString(borderColor);
     const arrowPos = mirrorPos(arrowPosition);
-    let positionStyle = `${arrowPos}:-6px;`;
+    const arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
+    let positionStyle = '';
     let transformStyle = CSS_TRANSFORM_VENDOR + ':';
+    let rotateDeg;
     if (indexOf(['left', 'right'], arrowPos) > -1) {
         positionStyle += 'top:50%';
-        transformStyle += `translateY(-50%) rotate(${arrowPos === 'left' ? -225 : -45}deg)`;
+        transformStyle += `translateY(-50%) rotate(${rotateDeg = arrowPos === 'left' ? -225 : -45}deg)`;
     }
     else {
         positionStyle += 'left:50%';
-        transformStyle += `translateX(-50%) rotate(${arrowPos === 'top' ? 225 : 45}deg)`;
+        transformStyle += `translateX(-50%) rotate(${rotateDeg = arrowPos === 'top' ? 225 : 45}deg)`;
     }
-
-    const borderStyle = `${borderColor} solid 1px;`;
+    const rotateRadian = rotateDeg * Math.PI / 180;
+    const arrowWH = arrowSize + borderWidth;
+    const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
+    const arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2
+        + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
+    positionStyle += `;${arrowPos}:-${arrowOffset}px`;
+
+    const borderStyle = `${borderColor} solid ${borderWidth}px;`;
     const styleCss = [
-        'position:absolute;width:10px;height:10px;',
+        `position:absolute;width:${arrowSize}px;height:${arrowSize}px;`,
         `${positionStyle};${transformStyle};`,
         `border-bottom:${borderStyle}`,
         `border-right:${borderStyle}`,
-        `background-color:${backgroundColor};`,
-        'box-shadow:8px 8px 16px -3px #000;'
+        `background-color:${backgroundColor};`
     ];
+
     return `<div style="${styleCss.join('')}"></div>`;
 }
 
@@ -411,7 +422,7 @@ class TooltipHTMLContent {
 
         if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item'
             && !shouldTooltipConfine(tooltipModel)) {
-            content += assembleArrow(tooltipModel.get('backgroundColor'), borderColor, arrowPosition);
+            content += assembleArrow(tooltipModel, borderColor, arrowPosition);
         }
         if (isString(content)) {
             el.innerHTML = content;
@@ -436,7 +447,7 @@ class TooltipHTMLContent {
 
     getSize() {
         const el = this.el;
-        return [el.clientWidth, el.clientHeight];
+        return [el.offsetWidth, el.offsetHeight];
     }
 
     moveTo(zrX: number, zrY: number) {

src/component/tooltip/TooltipView.ts

@@ -894,7 +894,7 @@ class TooltipView extends ComponentView {
         // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
         else if (zrUtil.isString(positionExpr) && el) {
             const pos = calcTooltipPosition(
-                positionExpr, rect, contentSize
+                positionExpr, rect, contentSize, tooltipModel.get('borderWidth'),
             );
             x = pos[0];
             y = pos[1];
@@ -1089,12 +1089,12 @@ function confineTooltipPosition(
 function calcTooltipPosition(
     position: TooltipOption['position'],
     rect: ZRRectLike,
-    contentSize: number[]
+    contentSize: number[],
+    borderWidth: number
 ): [number, number] {
     const domWidth = contentSize[0];
     const domHeight = contentSize[1];
-    const gap = 10;
-    const offset = 5;
+    const offset = Math.max(Math.ceil(Math.sqrt(2 * borderWidth * borderWidth)), 5);
     let x = 0;
     let y = 0;
     const rectWidth = rect.width;
@@ -1106,18 +1106,18 @@ function calcTooltipPosition(
             break;
         case 'top':
             x = rect.x + rectWidth / 2 - domWidth / 2;
-            y = rect.y - domHeight - gap;
+            y = rect.y - domHeight - offset;
             break;
         case 'bottom':
             x = rect.x + rectWidth / 2 - domWidth / 2;
-            y = rect.y + rectHeight + gap;
+            y = rect.y + rectHeight + offset;
             break;
         case 'left':
-            x = rect.x - domWidth - gap - offset;
+            x = rect.x - domWidth - offset;
             y = rect.y + rectHeight / 2 - domHeight / 2;
             break;
         case 'right':
-            x = rect.x + rectWidth + gap + offset;
+            x = rect.x + rectWidth + offset;
             y = rect.y + rectHeight / 2 - domHeight / 2;
     }
     return [x, y];