CODEWITHSUNDEEP
reactjs
WebGuru
WebGuru

Reputation: 189

how to visible tooltip always in react slider

I am using react slider with tooltip.

 <Slider 
        min={ set_min(this.state.myValue) }
        max={ set_max(this.state.myValue) } 
        defaultValue={  set_def(this.state.myValue) } 
        handle={handle} 
        toolTipVisibleAlways = {true}
 />

<Tooltip
  className = "tooltip-custom"
  prefixCls="rc-slider-tooltip"
  overlay={percentFormatter(value, this.state.myValue) }
  visible={dragging}
  placement="top"
  key={index}
  delayShow = {300}
  delayHide = {150}
>
<Handle value={value} {...restProps} />
</Tooltip>

all things are good and well-displayed. what i want to know is that how can i make tooltip always visible.

I searched this answer on the internet and found two answers. first one is toolTipVisibleAlways = {true} and second one is delayShow = {300} delayHide = {150}

But as you can see my code, nothing changed.

Upvotes: 1

Views: 7022

Answers (2)

jyotishman saikia
jyotishman saikia

Reputation: 2195

I solved this issue by making my own inside the handle. This way the text will always move with the handle.

<SliderTooltip
  prefixCls="rc-slider-tooltip"
  visible={dragging}
  placement="top"
  key={index}
  defaultVisible={true}
  visible={true}
  align={{
    offset: [0, -5],
  }}
>
  <Handle value={value} {...restProps}>
    <span>{value}</span>
  </Handle>
</SliderTooltip>

Upvotes: 0

Nishant.shahakar
Nishant.shahakar

Reputation: 63

Use tipProps props exposed after Slider wrapped by createSliderWithTooltip. Example below should work as tipProps will pass the props to rc-tooltip component. Read here for detailed explanation and also see this example provided by rc-slider .

<Slider 
    min={ set_min(this.state.myValue) }
    max={ set_max(this.state.myValue) } 
    defaultValue={  set_def(this.state.myValue) } 
    handle={handle} 
    tipProps={{visible:true}}
/>

Upvotes: 3

Related Questions