From d2b311f27a7eeea3a61b589763e5abadb4863102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 5 Dec 2024 14:51:56 +0800
Subject: [PATCH] fix: Tooltip min width to resolve arrow pos (#51904)

* fix: tooltip arrow min width

* test: update snapshot

* fix: multiple width

* demo: update demo
---
 components/tooltip/demo/debug.tsx | 29 ++++++++++++++++++++---------
 components/tooltip/style/index.ts | 24 +++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/components/tooltip/demo/debug.tsx b/components/tooltip/demo/debug.tsx
index 60bb0bd2d1..d6fd9dad8b 100644
--- a/components/tooltip/demo/debug.tsx
+++ b/components/tooltip/demo/debug.tsx
@@ -1,15 +1,26 @@
 import React from 'react';
-import { Button, Tooltip } from 'antd';
+import { Button, Flex, Tooltip } from 'antd';
+
+const zeroWidthEle = <div />;
 
 const App: React.FC = () => (
-  <Tooltip
-    open
-    title="Thanks for using antd. Have a nice day !"
-    arrow={{ pointAtCenter: true }}
-    placement="topLeft"
-  >
-    <Button>Point at center</Button>
-  </Tooltip>
+  <Flex vertical gap={72} align="flex-start">
+    <span />
+    <Tooltip
+      open
+      title="Thanks for using antd. Have a nice day !"
+      arrow={{ pointAtCenter: true }}
+      placement="topLeft"
+    >
+      <Button>Point at center</Button>
+    </Tooltip>
+    <Tooltip open title={zeroWidthEle} placement="topLeft">
+      <Button>Min Width</Button>
+    </Tooltip>
+    <Tooltip open title={zeroWidthEle} placement="top">
+      <Button>Min Width</Button>
+    </Tooltip>
+  </Flex>
 );
 
 export default App;
diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts
index fcd1a375fc..587331a0e3 100644
--- a/components/tooltip/style/index.ts
+++ b/components/tooltip/style/index.ts
@@ -30,6 +30,7 @@ interface TooltipToken extends FullToken<'Tooltip'> {
 
 const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
   const {
+    calc,
     componentCls, // ant-tooltip
     tooltipMaxWidth,
     tooltipColor,
@@ -40,8 +41,19 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
     boxShadowSecondary,
     paddingSM,
     paddingXS,
+    arrowOffsetHorizontal,
+    sizePopupArrow,
   } = token;
 
+  // arrowOffsetHorizontal + arrowWidth + borderRadius
+  const edgeAlignMinWidth = calc(tooltipBorderRadius)
+    .add(sizePopupArrow)
+    .add(arrowOffsetHorizontal)
+    .equal();
+
+  // borderRadius * 2 + arrowWidth
+  const centerAlignMinWidth = calc(tooltipBorderRadius).mul(2).add(sizePopupArrow).equal();
+
   return [
     {
       [componentCls]: {
@@ -65,7 +77,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
 
         // Wrapper for the tooltip content
         [`${componentCls}-inner`]: {
-          minWidth: '1em',
+          minWidth: centerAlignMinWidth,
           minHeight: controlHeight,
           padding: `${unit(token.calc(paddingSM).div(2).equal())} ${unit(paddingXS)}`,
           color: tooltipColor,
@@ -78,6 +90,16 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
           boxSizing: 'border-box',
         },
 
+        // Align placement should have another min width
+        [[
+          `&-placement-topLeft`,
+          `&-placement-topRight`,
+          `&-placement-bottomLeft`,
+          `&-placement-bottomRight`,
+        ].join(',')]: {
+          minWidth: edgeAlignMinWidth,
+        },
+
         // Limit left and right placement radius
         [[
           `&-placement-left`,