fix: Slider Tooltip not follow handler (#20699)

* fix: Slider Tooltip not follow handler

* force align only when tooltip visible

components/slider/SliderTooltip.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Tooltip, { TooltipProps } from '../tooltip';
+
+export default function SliderTooltip(props: TooltipProps) {
+  const { visible } = props;
+  const tooltipRef = React.useRef<Tooltip>(null);
+
+  const rafRef = React.useRef<number | null>(null);
+
+  function cancelKeepAlign() {
+    window.cancelAnimationFrame(rafRef.current!);
+    rafRef.current = null;
+  }
+
+  function keepAlign() {
+    if (rafRef.current !== null) {
+      return;
+    }
+
+    rafRef.current = window.requestAnimationFrame(() => {
+      if (tooltipRef.current && (tooltipRef.current as any).tooltip) {
+        (tooltipRef.current as any).tooltip.forcePopupAlign();
+      }
+
+      rafRef.current = null;
+      keepAlign();
+    });
+  }
+
+  React.useEffect(() => {
+    if (visible) {
+      keepAlign();
+    } else {
+      cancelKeepAlign();
+    }
+
+    return cancelKeepAlign;
+  }, [visible]);
+
+  return <Tooltip ref={tooltipRef} {...props} />;
+}

components/slider/index.tsx

@@ -3,7 +3,8 @@ import RcSlider from 'rc-slider/lib/Slider';
 import RcRange from 'rc-slider/lib/Range';
 import RcHandle from 'rc-slider/lib/Handle';
 import classNames from 'classnames';
-import Tooltip, { TooltipPlacement } from '../tooltip';
+import { TooltipPlacement } from '../tooltip';
+import SliderTooltip from './SliderTooltip';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface SliderMarks {
@@ -95,7 +96,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
     const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
     const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
     return (
-      <Tooltip
+      <SliderTooltip
         prefixCls={tooltipPrefixCls}
         title={tipFormatter ? tipFormatter(value) : ''}
         visible={visible}
@@ -111,7 +112,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
           onMouseEnter={() => this.toggleTooltipVisible(index, true)}
           onMouseLeave={() => this.toggleTooltipVisible(index, false)}
         />
-      </Tooltip>
+      </SliderTooltip>
     );
   };
 

package.json

@@ -126,7 +126,7 @@
     "rc-tooltip": "~4.0.0-alpha.3",
     "rc-tree": "~3.0.0-alpha.37",
     "rc-tree-select": "~3.0.0-alpha.5",
-    "rc-trigger": "~4.0.0-alpha.7",
+    "rc-trigger": "~4.0.0-rc.0",
     "rc-upload": "~3.0.0-alpha.0",
     "rc-util": "^4.17.0",
     "rc-virtual-list": "^0.0.0-alpha.25",