wie QuickInfo in rc-Slider zu formatieren

Question

Ich benutze reagieren rc-slider. Ich möchte Tooltip hinzufügen, um den aktuellen Wert anzuzeigen, dem ich rc-slider github post folge. aber meine Slider Position wurde behoben. und einmal erschien Tooltip und es verschwindet nicht. mein Schieber sieht gefällt dieses

Verwandte Code ist unten

const handle =() =>(

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

Und mein machen wird

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

mir bitte helfen, wie diese

Answer 1

ich am Ende zu verbessern mit createSliderWithTooltip von rc-slider unten ist mein aktualisiert

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

und in SCSS Datei hinzugefügt ähnliche

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