如何在rc-slider中格式化工具提示

Question

我正在使用react rc-slider。我想添加工具提示來顯示當前值，我正在關注rc-slider github post。但我的滑塊位置已修復。一旦出現工具提示並且不會消失。我的滑塊看起來喜歡這個

相關代碼如下

const handle =() =>(

     <Tooltip 
     prefixCls="rc-slider-tooltip" 
     overlay={this.props.value} 
     visible={true} 
     placement="top" 
     key={0} 
    > 
     <Handle value={this.props.value} /> 
    </Tooltip> 

我的渲​​染是

return (

     <Slider 
     min={this.props.minValue} 
     max={this.props.maxValue} 
     marks={marks} 
     disabled={this.props.disabled} 
     step={this.props.step} 
     onChange={this.updateValue.bind(this)} 
     value={this.props.value} 
     handle={handle} 
     // tipFormatter={value => `${value}%`} 
     onAfterChange={value => this.props.updateValue(value)} 
     /> 
) 

請幫助我如何改善這種

Answer 1

我結束了使用下面的rc-slider的createSliderWithTooltip是我的更新代碼

import Slider, { createSliderWithTooltip } from 'rc-slider'; 

const SliderWithTooltip = createSliderWithTooltip(Slider); 
<SliderWithTooltip 
     min={this.props.minValue} 
     max={this.props.maxValue} 
     marks={marks} 
     disabled={this.props.disabled} 
     step={this.props.step} 
     onChange={this.updateMixValue.bind(this)} 
     value={this.props.value} 
       onAfterChange={value => this.props.MixValue(getValues(value))} 
     /> 

和SCSS文件中加入這樣的

.rc-slider-mark{ 
       padding-top:7px; 
      } 
      .rc-slider-step{ 
       span{ 
        background-color: rgb(44, 71, 112); 
    border-color: rgb(44, 71, 112); 
       } 
      } 
      .rc-slider-handle{ 
       background-color: #5bc0de; 
       border-color: #5bc0de; 
      }