From 1f844c10489ad1a42a709d9af716a3cabceaf18a Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Thu, 23 Feb 2017 17:03:18 +0800
Subject: [PATCH] fix: Slider's Tooltip should not blink, close: #5003

---
 components/slider/index.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 99add48ebb..0463ef2660 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -43,30 +43,36 @@ export default class Slider extends React.Component<SliderProps, any> {
 
   constructor(props) {
     super(props);
-    this.state = { visibles: {} };
+    this.state = {
+      visibles: {},
+    };
   }
 
-  handleTooltipVisibleChange = (index, visible) => {
-    this.setState({
+  toggleTooltipVisible = (index, visible) => {
+    this.setState(({ visibles }) => ({
       visibles: {
-        ...this.state.visibles,
+        ...visibles,
         [index]: visible,
       },
-    });
+    }));
   }
   handleWithTooltip = ({ value, dragging, index, ...restProps }) => {
     const { tooltipPrefixCls, tipFormatter } = this.props;
+    const { visibles } = this.state;
     return (
       <Tooltip
         prefixCls={tooltipPrefixCls}
         title={tipFormatter ? tipFormatter(value) : ''}
-        visible={tipFormatter && (this.state.visibles[index] || dragging)}
-        onVisibleChange={visible => this.handleTooltipVisibleChange(index, visible)}
+        visible={tipFormatter && (visibles[index] || dragging)}
         placement="top"
         transitionName="zoom-down"
         key={index}
       >
-        <RcHandle {...restProps} />
+        <RcHandle
+          {...restProps}
+          onMouseEnter={() => this.toggleTooltipVisible(index, true)}
+          onMouseLeave={() => this.toggleTooltipVisible(index, false)}
+        />
       </Tooltip>
     );
   }