fix: 🐛 empty disabled Button align issue (#22461)

* chore: add .ant-tooltip-disabled-compatible-wrapper

* fix: empty button align issue

components/button/style/index.less

@@ -227,8 +227,12 @@
   }
 
   // https://github.com/ant-design/ant-design/issues/12681
+  // same method as Select
   &:empty {
-    vertical-align: top;
+    display: inline-block;
+    width: 0;
+    visibility: hidden;
+    content: '\a0';
   }
 }
 

components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap

@@ -4,6 +4,7 @@ exports[`Tooltip rtl render component should be rendered correctly in RTL direct
 
 exports[`Tooltip should hide when mouse leave antd disabled component Button 1`] = `
 <span
+  class="ant-tooltip-disabled-compatible-wrapper"
   style="display: inline-block; cursor: not-allowed;"
 >
   <button
@@ -17,6 +18,7 @@ exports[`Tooltip should hide when mouse leave antd disabled component Button 1`]
 
 exports[`Tooltip should hide when mouse leave antd disabled component Checkbox 1`] = `
 <span
+  class="ant-tooltip-disabled-compatible-wrapper"
   style="display: inline-block; cursor: not-allowed;"
 >
   <label
@@ -42,6 +44,7 @@ exports[`Tooltip should hide when mouse leave antd disabled component Checkbox 1
 
 exports[`Tooltip should hide when mouse leave antd disabled component Switch 1`] = `
 <span
+  class="ant-tooltip-disabled-compatible-wrapper"
   style="display: inline-block; cursor: not-allowed;"
 >
   <button

components/tooltip/index.tsx

@@ -74,7 +74,7 @@ const splitObject = (obj: any, keys: string[]) => {
 // Fix Tooltip won't hide at disabled button
 // mouse events don't trigger at disabled button in Chrome
 // https://github.com/react-component/tooltip/issues/18
-function getDisabledCompatibleChildren(element: React.ReactElement<any>) {
+function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
   const elementType = element.type as any;
   if (
     (elementType.__ANT_BUTTON === true ||
@@ -110,7 +110,10 @@ function getDisabledCompatibleChildren(element: React.ReactElement<any>) {
       className: null,
     });
     return (
-      <span style={spanStyle} className={element.props.className}>
+      <span
+        style={spanStyle}
+        className={classNames(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)}
+      >
         {child}
       </span>
     );
@@ -238,6 +241,7 @@ class Tooltip extends React.Component<TooltipProps, any> {
 
     const child = getDisabledCompatibleChildren(
       React.isValidElement(children) ? children : <span>{children}</span>,
+      prefixCls,
     );
 
     const childProps = child.props;