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

@@ -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;

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`,