comment formater l'info-bulle dans rc-curseur

Question

J'utilise réagir rc-slider. Je veux ajouter une info-bulle pour afficher la valeur actuelle Je suis rc-slider github post. mais ma position de curseur a été fixée. et une fois que l'info-bulle est apparue et qu'elle ne disparaît pas. mon curseur regarde aime cette

Code connexe est inférieure

const handle =() =>(

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

Et mon rendu est

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

s'il vous plaît aidez-moi comment améliorer cette

Answer 1

Je finis en utilisant createSliderWithTooltip de rc-curseur ci-dessous est ma mise à jour Code

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

et dans le fichier SCSS ajouté comme celui-ci

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