Question

我正在使用反应滑块和工具提示。

 <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>

所有事情都很好并且很好地展示了。我想知道的是，我怎样才能使工具提示始终可见。

我在互联网上搜索了这个答案，找到了两个答案。第一个是toolTipVisibleAlways = {true} 第二个是 delayShow = {300} delayHide = {150}

但是你可以看到我的代码，没有任何改变。

Answer 1

使用由createSliderWithTooltip包装的Slider后公开的 tipProps 道具。下面的示例应该起作用，因为tipProps会将道具传递给rc-tooltip组件。请阅读here以获取详细说明，并阅读rc-slider提供的此see示例

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

Answer 2

我通过在手柄内制作我自己的来解决这个问题。这样，文本将始终随手柄移动。

<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>

如何在反应滑块中始终显示工具提示

2 个答案: