Javascript 如何在rc滑块中设置工具提示的格式

我正在使用react

rc滑块

。我想添加工具提示以显示我正在跟踪的当前值。但是我的滑杆位置被固定了。一旦工具提示出现，它不会消失。我的滑块看起来像这样

相关代码如下

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)}
      />
)

返回(
`${value}%`}
onAfterChange={value=>this.props.updateValue（value）}
/>
)

---

请帮助我如何改进这一点

我最终使用了

createSliderWithTooltip

的rc slider下面是我的更新代码

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))}
      />

---

控制台中是否有任何错误？如果我使用

范围

它是针对

滑块

否

  .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;
            }