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 =
;
const App: React.FC = () => (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
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 = (token) => {
const {
+ calc,
componentCls, // ant-tooltip
tooltipMaxWidth,
tooltipColor,
@@ -40,8 +41,19 @@ const genTooltipStyle: GenerateStyle = (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 = (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 = (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`,