[GitHub] [echarts] plainheart commented on a change in pull request #14393: bug(tooltip): tooltip arrow will follow borderWidth. close #14373

[GitBox]

plainheart commented on a change in pull request #14393:
URL: https://github.com/apache/echarts/pull/14393#discussion_r627858707



##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -60,17 +60,21 @@ 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 = borderWidth >= 5 ? borderWidth : 5;
+    let positionStyle = `${arrowPos}:-${Math.sqrt(2 * arrowSize * arrowSize) / 
2 + borderWidth}px;`;

Review comment:
       It seems both horizontal and vertical positions are off a bit. I think 
the position of arrow is correct(vertical middle / horizontal center of the 
tooltip container), but the position of the tooltip container is not correct, 
it should consider arrow size when transforming the container's x/y.
   
   What expected is like this
   <img 
src="https://user-images.githubusercontent.com/26999792/117383828-38acfd80-af14-11eb-9ef1-7e3eae615d21.png";
 width="200">
   
   However, now it is
   <img 
src="https://user-images.githubusercontent.com/26999792/117383929-6db95000-af14-11eb-9bfb-55da54d2bdc9.png";
 width="200">
   




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org