🐛 Fix Slider tooltip not aligned center (#20016)

close #20014

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -11156,7 +11156,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
   />
   <div>
     <div
-      class="config-tooltip  config-tooltip-placement-top "
+      class="config-tooltip config-slider-tooltip config-tooltip-placement-top "
     >
       <div
         class="config-tooltip-content"
@@ -11205,7 +11205,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
   />
   <div>
     <div
-      class="ant-tooltip  ant-tooltip-placement-top "
+      class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top "
     >
       <div
         class="ant-tooltip-content"
@@ -11254,7 +11254,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
   />
   <div>
     <div
-      class="prefix-Slider-tooltip  prefix-Slider-tooltip-placement-top "
+      class="prefix-Slider-tooltip prefix-Slider-tooltip prefix-Slider-tooltip-placement-top "
     >
       <div
         class="prefix-Slider-tooltip-content"

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -949,7 +949,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
   />
   <div>
     <div
-      class="ant-tooltip  ant-tooltip-placement-top "
+      class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top "
     >
       <div
         class="ant-tooltip-content"

components/slider/__tests__/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div>
   <div
-    class="ant-tooltip  ant-tooltip-placement-top "
+    class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top "
   >
     <div
       class="ant-tooltip-content"
@@ -25,7 +25,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div>
   <div
-    class="ant-tooltip  ant-tooltip-placement-top  ant-tooltip-hidden"
+    class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top  ant-tooltip-hidden"
   >
     <div
       class="ant-tooltip-content"

components/slider/index.tsx

@@ -22,10 +22,12 @@ interface HandleGeneratorInfo {
   index: number;
   rest: any[];
 }
-export type HandleGeneratorFn = (
-  tooltipPrefixCls: string,
-  info: HandleGeneratorInfo,
-) => React.ReactNode;
+
+export type HandleGeneratorFn = (config: {
+  tooltipPrefixCls?: string;
+  prefixCls?: string;
+  info: HandleGeneratorInfo;
+}) => React.ReactNode;
 
 export interface SliderProps {
   prefixCls?: string;
@@ -82,10 +84,11 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
     }));
   };
 
-  handleWithTooltip: HandleGeneratorFn = (
-    tooltipPrefixCls: string,
-    { value, dragging, index, ...restProps },
-  ) => {
+  handleWithTooltip: HandleGeneratorFn = ({
+    tooltipPrefixCls,
+    prefixCls,
+    info: { value, dragging, index, ...restProps },
+  }) => {
     const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer } = this.props;
     const { visibles } = this.state;
     const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
@@ -98,6 +101,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
         placement={tooltipPlacement || 'top'}
         transitionName="zoom-down"
         key={index}
+        overlayClassName={`${prefixCls}-tooltip`}
         getPopupContainer={getTooltipPopupContainer || (() => document.body)}
       >
         <RcHandle
@@ -136,7 +140,13 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
         <RcRange
           {...restProps}
           ref={this.saveSlider}
-          handle={(info: HandleGeneratorInfo) => this.handleWithTooltip(tooltipPrefixCls, info)}
+          handle={(info: HandleGeneratorInfo) =>
+            this.handleWithTooltip({
+              tooltipPrefixCls,
+              prefixCls,
+              info,
+            })
+          }
           prefixCls={prefixCls}
           tooltipPrefixCls={tooltipPrefixCls}
         />
@@ -146,7 +156,13 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
       <RcSlider
         {...restProps}
         ref={this.saveSlider}
-        handle={(info: HandleGeneratorInfo) => this.handleWithTooltip(tooltipPrefixCls, info)}
+        handle={(info: HandleGeneratorInfo) =>
+          this.handleWithTooltip({
+            tooltipPrefixCls,
+            prefixCls,
+            info,
+          })
+        }
         prefixCls={prefixCls}
         tooltipPrefixCls={tooltipPrefixCls}
       />

components/slider/style/index.less

@@ -187,4 +187,11 @@
       margin-bottom: -4px;
     }
   }
+
+  &-tooltip {
+    // https://github.com/ant-design/ant-design/issues/20014
+    .@{ant-prefix}-tooltip-inner {
+      min-width: unset;
+    }
+  }
 }