Add Slider/RangeSlider tooltip.format and tooltip.style.

Author: T4rk1n

components/dash-core-components/src/components/RangeSlider.react.js

@@ -125,6 +125,15 @@ RangeSlider.propTypes = {
             'bottomLeft',
             'bottomRight',
         ]),
+        /**
+         * Format to apply to the tooltip
+         * The string must contain `{value}`
+         */
+        format: PropTypes.string,
+        /**
+         * Custom style for the tooltip.
+         */
+        style: PropTypes.object,
     }),
 
     /**

components/dash-core-components/src/components/Slider.react.js

@@ -2,6 +2,8 @@ import React, {Component, lazy, Suspense} from 'react';
 import PropTypes from 'prop-types';
 import slider from '../utils/LazyLoader/slider';
 
+import './css/sliders.css';
+
 const RealSlider = lazy(slider);
 
 /**
@@ -105,6 +107,15 @@ Slider.propTypes = {
             'bottomLeft',
             'bottomRight',
         ]),
+        /**
+         * Format to apply to the tooltip
+         * The string must contain `{value}`
+         */
+        format: PropTypes.string,
+        /**
+         * Custom style for the tooltip.
+         */
+        style: PropTypes.object,
     }),
 
     /**

components/dash-core-components/src/components/css/sliders.css

@@ -0,0 +1,5 @@
+/* Fix the default tooltip style height conflicting with the actual size of the tooltip. */
+.rc-slider-tooltip-content > .rc-slider-tooltip-inner {
+    height: unset;
+    min-height: 20px;
+}

components/dash-core-components/src/fragments/RangeSlider.react.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {assoc, pick, isNil} from 'ramda';
+import {assoc, pick, isNil, pipe, dissoc} from 'ramda';
 import {Range, createSliderWithTooltip} from 'rc-slider';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
@@ -11,6 +11,7 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/RangeSlider.react';
+import {formatSliderTooltip} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -72,17 +73,29 @@ export default class RangeSlider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        let tipProps;
-        if (tooltip && tooltip.always_visible) {
+        let tipProps, tipFormatter;
+        if (tooltip) {
             /**
              * clone `tooltip` but with renamed key `always_visible` -> `visible`
-             * the rc-tooltip API uses `visible`, but `always_visible is more semantic
+             * the rc-tooltip API uses `visible`, but `always_visible` is more semantic
              * assigns the new (renamed) key to the old key and deletes the old key
              */
-            tipProps = assoc('visible', tooltip.always_visible, tooltip);
-            delete tipProps.always_visible;
-        } else {
-            tipProps = tooltip;
+            tipProps = pipe(
+                assoc('visible', tooltip.always_visible),
+                dissoc('always_visible'),
+                dissoc('format'),
+                dissoc('style')
+            )(tooltip);
+            if (tooltip.format || tooltip.style) {
+                tipFormatter = tipValue => (
+                    <div style={tooltip.style}>
+                        {formatSliderTooltip(
+                            tooltip.format || '{value}',
+                            tipValue
+                        )}
+                    </div>
+                );
+            }
         }
 
         return (
@@ -116,6 +129,7 @@ export default class RangeSlider extends Component {
                         ...tipProps,
                         getTooltipContainer: node => node,
                     }}
+                    tipFormatter={tipFormatter}
                     style={{position: 'relative'}}
                     value={value ? value : calcValue(min, max, value)}
                     marks={sanitizeMarks({min, max, marks, step})}

components/dash-core-components/src/fragments/Slider.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
-import {assoc, isNil, pick} from 'ramda';
+import {assoc, isNil, pick, pipe, dissoc} from 'ramda';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
 import 'rc-slider/assets/index.css';
@@ -11,6 +11,7 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/Slider.react';
+import {formatSliderTooltip} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -72,17 +73,29 @@ export default class Slider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        let tipProps;
-        if (tooltip && tooltip.always_visible) {
+        let tipProps, tipFormatter;
+        if (tooltip) {
             /**
              * clone `tooltip` but with renamed key `always_visible` -> `visible`
              * the rc-tooltip API uses `visible`, but `always_visible` is more semantic
              * assigns the new (renamed) key to the old key and deletes the old key
              */
-            tipProps = assoc('visible', tooltip.always_visible, tooltip);
-            delete tipProps.always_visible;
-        } else {
-            tipProps = tooltip;
+            tipProps = pipe(
+                assoc('visible', tooltip.always_visible),
+                dissoc('always_visible'),
+                dissoc('format'),
+                dissoc('style')
+            )(tooltip);
+            if (tooltip.format || tooltip.style) {
+                tipFormatter = tipValue => (
+                    <div style={tooltip.style}>
+                        {formatSliderTooltip(
+                            tooltip.format || '{value}',
+                            tipValue
+                        )}
+                    </div>
+                );
+            }
         }
 
         return (
@@ -116,6 +129,7 @@ export default class Slider extends Component {
                         ...tipProps,
                         getTooltipContainer: node => node,
                     }}
+                    tipFormatter={tipFormatter}
                     style={{position: 'relative'}}
                     value={value}
                     marks={sanitizeMarks({min, max, marks, step})}

components/dash-core-components/src/utils/formatSliderTooltip.js

@@ -0,0 +1,5 @@
+import {replace} from 'ramda';
+
+export const formatSliderTooltip = (template, value) => {
+    return replace('{value}', value, template);
+};

components/dash-core-components/tests/integration/sliders/test_sliders.py

@@ -559,3 +559,51 @@ def test_slsl015_range_slider_no_min_max(dash_dcc):
     )
 
     assert dash_dcc.get_logs() == []
+
+
+def test_sls016_sliders_format_tooltips(dash_dcc):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Slider(
+                value=34,
+                min=20,
+                max=100,
+                id="slider",
+                tooltip={
+                    "format": "Custom tooltip: {value}",
+                    "always_visible": True,
+                    "style": {"padding": "8px"},
+                },
+            ),
+            dcc.RangeSlider(
+                value=[48, 60],
+                min=20,
+                max=100,
+                id="range-slider",
+                tooltip={"format": "Custom tooltip: {value}", "always_visible": True},
+            ),
+        ],
+        style={"padding": "12px", "marginTop": "48px"},
+    )
+
+    dash_dcc.start_server(app)
+    # dash_dcc.wait_for_element("#slider")
+
+    dash_dcc.wait_for_text_to_equal(
+        "#slider .rc-slider-tooltip-content", "Custom tooltip: 34"
+    )
+    dash_dcc.wait_for_text_to_equal(
+        "#range-slider .rc-slider-tooltip-content", "Custom tooltip: 48"
+    )
+    dash_dcc.wait_for_text_to_equal(
+        "#range-slider > div:nth-child(1) > div:last-child .rc-slider-tooltip-content",
+        "Custom tooltip: 60",
+    )
+    dash_dcc.wait_for_style_to_equal(
+        "#slider .rc-slider-tooltip-inner > div", "padding", "8px"
+    )
+
+    dash_dcc.percy_snapshot("sliders-format-tooltips")
+
+    assert dash_dcc.get_logs() == []