Allow to pass array as tipProps

README.md

@@ -85,7 +85,7 @@ After Range or Slider was wrapped by createSliderWithTooltip, it will have the f
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | tipFormatter | (value: number): React.ReactNode | `value => value` | A function to format tooltip's overlay |
-| tipProps | Object | `{` <br>`placement: 'top',` <br> ` prefixCls: 'rc-slider-tooltip',` <br> `overlay: tipFormatter(value)` <br> `}` | A function to format tooltip's overlay |
+| tipProps | Array[Object] \| Object | `{` <br>`placement: 'top',` <br> ` prefixCls: 'rc-slider-tooltip',` <br> `overlay: tipFormatter(value)` <br> `}` | A function to format tooltip's overlay |
 
 ### Common API
 

examples/handle.js

@@ -37,6 +37,16 @@ ReactDOM.render(
       <p>Range with custom handle</p>
       <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
     </div>
+    <div style={wrapperStyle}>
+      <p>Range with custom handle</p>
+      <Range
+        min={0}
+        max={20}
+        defaultValue={[3, 10]}
+        tipFormatter={value => `${value}%`}
+        tipProps={[{ placement: 'bottomLeft' }, { placement: 'bottomRight' }]}
+      />
+    </div>
   </div>,
   document.getElementById('__react-content')
 );

src/createSliderWithTooltip.jsx

@@ -8,7 +8,7 @@ export default function createSliderWithTooltip(Component) {
     static propTypes = {
       tipFormatter: PropTypes.func,
       handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
-      tipProps: PropTypes.object,
+      tipProps: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
     };
     static defaultProps = {
       tipFormatter(value) { return value; },
@@ -36,13 +36,20 @@ export default function createSliderWithTooltip(Component) {
         handleStyle,
       } = this.props;
 
+      let tipPropsWithIndex;
+      if (Array.isArray(tipProps)) {
+        tipPropsWithIndex = { ...tipProps[0], ...(tipProps[index] || {}) };
+      } else {
+        tipPropsWithIndex = tipProps;
+      }
+
       const {
         prefixCls = 'rc-slider-tooltip',
         overlay = tipFormatter(value),
         placement = 'top',
         visible = visible || false,
         ...restTooltipProps,
-      } = tipProps;
+      } = tipPropsWithIndex;
 
       let handleStyleWithIndex;
       if (Array.isArray(handleStyle)) {

tests/Range.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len, no-undef */
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 import Range from '../src/Range';
 import createSliderWithTooltip from '../src/createSliderWithTooltip';
 
@@ -101,6 +101,18 @@ describe('Range', () => {
     expect(wrapper.state().visibles[1]).toBe(false);
   });
 
+  it('should pass different props to the Tooltips', () => {
+    const wrapper = shallow((
+      <RangeWithTooltip
+        min={0}
+        max={1000}
+        defaultValue={[50, 55]}
+        tipProps={[{ placement: 'bottomLeft' }, { placement: 'bottomRight' }]}
+      />)).dive();
+    expect(wrapper.find('Tooltip[placement="bottomLeft"]')).toHaveLength(1);
+    expect(wrapper.find('Tooltip[placement="bottomRight"]')).toHaveLength(1);
+  });
+
   it('should keep pushable when not allowCross and setState', () => {
     class CustomizedRange extends React.Component { // eslint-disable-line
       constructor(props) {