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}
@@ -104,18 +105,14 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
         key={index}
         overlayClassName={`${prefixCls}-tooltip`}
         getPopupContainer={getTooltipPopupContainer || (() => document.body)}
-        {
-          // For slider only, it's a prop from `rc-trigger`
-          ...{ keepAlign: true }
-        }
       >
         <RcHandle
           {...restProps}
           value={value}
           onMouseEnter={() => this.toggleTooltipVisible(index, true)}
           onMouseLeave={() => this.toggleTooltipVisible(index, false)}
         />
-      </Tooltip>
+      </SliderTooltip>
     );
   };