Range Doesn't Support Custom Tooltip

[lgants]

I copied the example in the docs and added a Range component that uses the same tooltip as the Slider. The custom tooltip on Slider works as anticipated. However, the tooltip on both Range components is identical despite one of the Range components receiving a handle prop with custom tooltip. Thoughts?

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={true}
      placement="top"
      key={index}
    >
      <Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const wrapperStyle = { width: 400, margin: 50 };

export default () => {
    return (
        <div>
            <div style={wrapperStyle}>
                <p>Slider with custom handle</p>
                <Slider min={0} max={20} defaultValue={3} handle={handle} />
            </div>
            <div style={wrapperStyle}>
                <p>Range with custom handle</p>
                <Range min={0} max={20} defaultValue={[3, 10]} handle={handle} />
            </div>
            <div style={wrapperStyle}>
                <p>Range with custom handle</p>
                <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
            </div>
      </div>
    )
}

[aranair]

I have a custom tooltip that is working for me (on a range). You can try importing Range instead?

import Slider, { Range } from 'rc-slider';

[hurrtz]

Have you tried logging anything in your handle function to ensure that the function gets used? In my case the prop "handle" does not get triggered if the range is used as a createSliderWithTooltip(range). Guess, this is a bug... Theoretically you could work around this via the prop "handleStyle" and supply an array with objects containing css definitions, one object per handle, but there, also, is a bug where only the first object is being used and applied over all handles. Sorry for all the bad news, though.

[aranair]

Hmm, I’m 100% certain it’s working for me because of a bunch of custom date formatting in it.

[bcvazquez]

If you want to use a custom Tooltip then you don't need to use createSliderWithTooltip, because that will override what you are trying to do. Just use Slider.Range as your Component rather than const Range = createSliderWithTooltip(Slider.Range);

[yesmeck]

Duplicate of #400

[rainitesh]

is this working? For me, the tooltips don't show at all :(

[ZiedHf]

@rainitesh same problem for me. I tried the same example in the docs.
Tested on Chrome and Firefox.