From 0ca1b946288ce505a86ac4756094bde03011f58c Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Wed, 10 Jan 2024 16:11:49 -0500
Subject: [PATCH 1/6] Add Slider/RangeSlider tooltip.format and tooltip.style.

---
 .../src/components/RangeSlider.react.js       |  9 ++++
 .../src/components/Slider.react.js            | 11 +++++
 .../src/components/css/sliders.css            |  5 ++
 .../src/fragments/RangeSlider.react.js        | 30 ++++++++----
 .../src/fragments/Slider.react.js             | 28 ++++++++---
 .../src/utils/formatSliderTooltip.js          |  5 ++
 .../tests/integration/sliders/test_sliders.py | 48 +++++++++++++++++++
 7 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 components/dash-core-components/src/components/css/sliders.css
 create mode 100644 components/dash-core-components/src/utils/formatSliderTooltip.js

diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 6db2a43b76..d6601f62cb 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/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,
     }),
 
     /**
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index 00c6c41a18..6b1261f602 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/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,
     }),
 
     /**
diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css
new file mode 100644
index 0000000000..664ddc6a50
--- /dev/null
+++ b/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;
+}
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index 5e93772a0b..abf8d4494a 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/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})}
diff --git a/components/dash-core-components/src/fragments/Slider.react.js b/components/dash-core-components/src/fragments/Slider.react.js
index 2878658b0d..4dfa28c226 100644
--- a/components/dash-core-components/src/fragments/Slider.react.js
+++ b/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})}
diff --git a/components/dash-core-components/src/utils/formatSliderTooltip.js b/components/dash-core-components/src/utils/formatSliderTooltip.js
new file mode 100644
index 0000000000..ed32f63588
--- /dev/null
+++ b/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);
+};
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders.py b/components/dash-core-components/tests/integration/sliders/test_sliders.py
index 42e95de5dd..2a7f28ae90 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders.py
+++ b/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() == []

From 45e8aa852ddc26c7b50f0f1dc521130a4ae16585 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Thu, 11 Jan 2024 08:53:46 -0500
Subject: [PATCH 2/6] Update changelog.

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4891531bf3..d569c72848 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 - [#2695](https://github.com/plotly/dash/pull/2695) Adds  `triggered_id` to `dash_clientside.callback_context`.  Fixes [#2692](https://github.com/plotly/dash/issues/2692)
+- [#2723](https://github.com/plotly/dash/pull/2723) Improve dcc Slider/RangeSlider tooltips. Fixes [#1846](https://github.com/plotly/dash/issues/1846)
+  - Add `tooltip.format` a string for the format template, {value} will be formatted with the actual value.
+  - Add `tooltip.style` a style object to give to the div of the tooltip.
 
 ## Changed
 - [#2652](https://github.com/plotly/dash/pull/2652) dcc.Clipboard supports htm_content and triggers a copy to clipboard when n_clicks are changed

From 073775cd1f1120b332b4fbeab6126df2ca5e9470 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Fri, 12 Jan 2024 14:01:27 -0500
Subject: [PATCH 3/6] Update changelog.

---
 .../src/components/RangeSlider.react.js       | 14 ++++++++
 .../src/components/Slider.react.js            | 14 ++++++++
 .../src/fragments/RangeSlider.react.js        | 35 +++++++++++--------
 .../src/fragments/Slider.react.js             | 35 +++++++++++--------
 .../src/utils/formatSliderTooltip.js          | 16 ++++++++-
 .../integration/sliders/assets/transform.js   |  4 +++
 .../tests/integration/sliders/test_sliders.py |  9 +++++
 7 files changed, 98 insertions(+), 29 deletions(-)
 create mode 100644 components/dash-core-components/tests/integration/sliders/assets/transform.js

diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index d6601f62cb..4a4edaf112 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -134,6 +134,20 @@ RangeSlider.propTypes = {
          * Custom style for the tooltip.
          */
         style: PropTypes.object,
+        /**
+         * Reference to a function in the `window.dccFunctions` namespace.
+         * This can be added in a scrip in the asset folder.
+         *
+         * For example, in `assets/tooltip.js`:
+         * ```
+         * window.dccFunctions = window.dccFunctions || {};
+         * window.dccFunctions.multByTen = function(value) {
+         *     return value * 10;
+         * }
+         * ```
+         * Then in the component `tooltip={'transform': 'multByTen'
+         */
+        transform: PropTypes.string,
     }),
 
     /**
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index 6b1261f602..a1e8d2a64d 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/components/dash-core-components/src/components/Slider.react.js
@@ -116,6 +116,20 @@ Slider.propTypes = {
          * Custom style for the tooltip.
          */
         style: PropTypes.object,
+        /**
+         * Reference to a function in the `window.dccFunctions` namespace.
+         * This can be added in a scrip in the asset folder.
+         *
+         * For example, in `assets/tooltip.js`:
+         * ```
+         * window.dccFunctions = window.dccFunctions || {};
+         * window.dccFunctions.multByTen = function(value) {
+         *     return value * 10;
+         * }
+         * ```
+         * Then in the component `tooltip={'transform': 'multByTen'
+         */
+        transform: PropTypes.string,
     }),
 
     /**
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index abf8d4494a..7e93ef37d4 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/components/dash-core-components/src/fragments/RangeSlider.react.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {assoc, pick, isNil, pipe, dissoc} from 'ramda';
+import {assoc, pick, isNil, pipe, omit} from 'ramda';
 import {Range, createSliderWithTooltip} from 'rc-slider';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
@@ -11,7 +11,10 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/RangeSlider.react';
-import {formatSliderTooltip} from '../utils/formatSliderTooltip';
+import {
+    formatSliderTooltip,
+    transformSliderTooltip,
+} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -82,19 +85,23 @@ export default class RangeSlider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                dissoc('always_visible'),
-                dissoc('format'),
-                dissoc('style')
+                omit(['always_visible', 'format', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style) {
-                tipFormatter = tipValue => (
-                    <div style={tooltip.style}>
-                        {formatSliderTooltip(
-                            tooltip.format || '{value}',
-                            tipValue
-                        )}
-                    </div>
-                );
+            if (tooltip.format || tooltip.style || tooltip.transform) {
+                tipFormatter = tipValue => {
+                    let t = tipValue;
+                    if (tooltip.transform) {
+                        t = transformSliderTooltip(tooltip.transform, tipValue);
+                    }
+                    return (
+                        <div style={tooltip.style}>
+                            {formatSliderTooltip(
+                                tooltip.format || '{value}',
+                                t
+                            )}
+                        </div>
+                    );
+                };
             }
         }
 
diff --git a/components/dash-core-components/src/fragments/Slider.react.js b/components/dash-core-components/src/fragments/Slider.react.js
index 4dfa28c226..e4d1664606 100644
--- a/components/dash-core-components/src/fragments/Slider.react.js
+++ b/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, pipe, dissoc} from 'ramda';
+import {assoc, isNil, pick, pipe, omit} from 'ramda';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
 import 'rc-slider/assets/index.css';
@@ -11,7 +11,10 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/Slider.react';
-import {formatSliderTooltip} from '../utils/formatSliderTooltip';
+import {
+    formatSliderTooltip,
+    transformSliderTooltip,
+} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -82,19 +85,23 @@ export default class Slider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                dissoc('always_visible'),
-                dissoc('format'),
-                dissoc('style')
+                omit(['always_visible', 'format', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style) {
-                tipFormatter = tipValue => (
-                    <div style={tooltip.style}>
-                        {formatSliderTooltip(
-                            tooltip.format || '{value}',
-                            tipValue
-                        )}
-                    </div>
-                );
+            if (tooltip.format || tooltip.style || tooltip.transform) {
+                tipFormatter = tipValue => {
+                    let t = tipValue;
+                    if (tooltip.transform) {
+                        t = transformSliderTooltip(tooltip.transform, tipValue);
+                    }
+                    return (
+                        <div style={tooltip.style}>
+                            {formatSliderTooltip(
+                                tooltip.format || '{value}',
+                                t
+                            )}
+                        </div>
+                    );
+                };
             }
         }
 
diff --git a/components/dash-core-components/src/utils/formatSliderTooltip.js b/components/dash-core-components/src/utils/formatSliderTooltip.js
index ed32f63588..5519db4b86 100644
--- a/components/dash-core-components/src/utils/formatSliderTooltip.js
+++ b/components/dash-core-components/src/utils/formatSliderTooltip.js
@@ -1,5 +1,19 @@
-import {replace} from 'ramda';
+import {replace, path, split, concat, pipe} from 'ramda';
 
 export const formatSliderTooltip = (template, value) => {
     return replace('{value}', value, template);
 };
+
+export const transformSliderTooltip = (funcName, value) => {
+    const func = pipe(
+        split('.'),
+        s => concat(['dccFunctions'], s),
+        s => path(s, window)
+    )(funcName);
+    if (!func) {
+        throw new Error(
+            `Invalid func for slider tooltip transform: ${funcName}`
+        );
+    }
+    return func(value);
+};
diff --git a/components/dash-core-components/tests/integration/sliders/assets/transform.js b/components/dash-core-components/tests/integration/sliders/assets/transform.js
new file mode 100644
index 0000000000..0b68f9a23d
--- /dev/null
+++ b/components/dash-core-components/tests/integration/sliders/assets/transform.js
@@ -0,0 +1,4 @@
+window.dccFunctions = window.dccFunctions || {};
+window.dccFunctions.transformTooltip = function(value) {
+    return "Transformed " + value
+}
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders.py b/components/dash-core-components/tests/integration/sliders/test_sliders.py
index 2a7f28ae90..a44b4ce54e 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders.py
@@ -583,6 +583,12 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
                 id="range-slider",
                 tooltip={"format": "Custom tooltip: {value}", "always_visible": True},
             ),
+            dcc.Slider(
+                min=20,
+                max=100,
+                id="slider-transform",
+                tooltip={"always_visible": True, "transform": "transformTooltip"},
+            ),
         ],
         style={"padding": "12px", "marginTop": "48px"},
     )
@@ -603,6 +609,9 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
     dash_dcc.wait_for_style_to_equal(
         "#slider .rc-slider-tooltip-inner > div", "padding", "8px"
     )
+    dash_dcc.wait_for_text_to_equal(
+        "#slider-transform .rc-slider-tooltip-content", "Transformed 20"
+    )
 
     dash_dcc.percy_snapshot("sliders-format-tooltips")
 

From f4ea5e430532ee8625b70b70d1f02190b1ab7731 Mon Sep 17 00:00:00 2001
From: Philippe Duval <t4rk@outlook.com>
Date: Tue, 30 Jan 2024 14:30:20 -0500
Subject: [PATCH 4/6] Update
 components/dash-core-components/src/components/RangeSlider.react.js

Fix typo

Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>
---
 .../dash-core-components/src/components/RangeSlider.react.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 4a4edaf112..0bf80bec86 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -136,7 +136,7 @@ RangeSlider.propTypes = {
         style: PropTypes.object,
         /**
          * Reference to a function in the `window.dccFunctions` namespace.
-         * This can be added in a scrip in the asset folder.
+         * This can be added in a script in the asset folder.
          *
          * For example, in `assets/tooltip.js`:
          * ```

From cd9c5231990ea6fbd8b7baff5fcb5be586c73d13 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 30 Jan 2024 14:48:41 -0500
Subject: [PATCH 5/6] Rename format -> template.

---
 .../src/components/RangeSlider.react.js                   | 8 +++++---
 .../dash-core-components/src/components/Slider.react.js   | 8 +++++---
 .../src/fragments/RangeSlider.react.js                    | 6 +++---
 .../dash-core-components/src/fragments/Slider.react.js    | 6 +++---
 .../tests/integration/sliders/test_sliders.py             | 4 ++--
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 0bf80bec86..e084d26ff6 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -126,10 +126,12 @@ RangeSlider.propTypes = {
             'bottomRight',
         ]),
         /**
-         * Format to apply to the tooltip
-         * The string must contain `{value}`
+         * Template string to display the tooltip in.
+         * Must contain `{value}`, which will be replaced with either
+         * the default string representation of the value or the result of the
+         * transform function if there is one.
          */
-        format: PropTypes.string,
+        template: PropTypes.string,
         /**
          * Custom style for the tooltip.
          */
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index a1e8d2a64d..5d3c6b9237 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/components/dash-core-components/src/components/Slider.react.js
@@ -108,10 +108,12 @@ Slider.propTypes = {
             'bottomRight',
         ]),
         /**
-         * Format to apply to the tooltip
-         * The string must contain `{value}`
+         * Template string to display the tooltip in.
+         * Must contain `{value}`, which will be replaced with either
+         * the default string representation of the value or the result of the
+         * transform function if there is one.
          */
-        format: PropTypes.string,
+        template: PropTypes.string,
         /**
          * Custom style for the tooltip.
          */
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index 7e93ef37d4..3c4f79c942 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/components/dash-core-components/src/fragments/RangeSlider.react.js
@@ -85,9 +85,9 @@ export default class RangeSlider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                omit(['always_visible', 'format', 'style', 'transform'])
+                omit(['always_visible', 'template', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style || tooltip.transform) {
+            if (tooltip.template || tooltip.style || tooltip.transform) {
                 tipFormatter = tipValue => {
                     let t = tipValue;
                     if (tooltip.transform) {
@@ -96,7 +96,7 @@ export default class RangeSlider extends Component {
                     return (
                         <div style={tooltip.style}>
                             {formatSliderTooltip(
-                                tooltip.format || '{value}',
+                                tooltip.template || '{value}',
                                 t
                             )}
                         </div>
diff --git a/components/dash-core-components/src/fragments/Slider.react.js b/components/dash-core-components/src/fragments/Slider.react.js
index e4d1664606..512ea5525c 100644
--- a/components/dash-core-components/src/fragments/Slider.react.js
+++ b/components/dash-core-components/src/fragments/Slider.react.js
@@ -85,9 +85,9 @@ export default class Slider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                omit(['always_visible', 'format', 'style', 'transform'])
+                omit(['always_visible', 'template', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style || tooltip.transform) {
+            if (tooltip.template || tooltip.style || tooltip.transform) {
                 tipFormatter = tipValue => {
                     let t = tipValue;
                     if (tooltip.transform) {
@@ -96,7 +96,7 @@ export default class Slider extends Component {
                     return (
                         <div style={tooltip.style}>
                             {formatSliderTooltip(
-                                tooltip.format || '{value}',
+                                tooltip.template || '{value}',
                                 t
                             )}
                         </div>
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders.py b/components/dash-core-components/tests/integration/sliders/test_sliders.py
index a44b4ce54e..08e303da37 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders.py
@@ -571,7 +571,7 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
                 max=100,
                 id="slider",
                 tooltip={
-                    "format": "Custom tooltip: {value}",
+                    "template": "Custom tooltip: {value}",
                     "always_visible": True,
                     "style": {"padding": "8px"},
                 },
@@ -581,7 +581,7 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
                 min=20,
                 max=100,
                 id="range-slider",
-                tooltip={"format": "Custom tooltip: {value}", "always_visible": True},
+                tooltip={"template": "Custom tooltip: {value}", "always_visible": True},
             ),
             dcc.Slider(
                 min=20,

From 06fb03a6fc4a1f8a41517cf25d1421474a4e53d5 Mon Sep 17 00:00:00 2001
From: Alex Johnson <johnson.alex.c@gmail.com>
Date: Tue, 30 Jan 2024 17:34:43 -0500
Subject: [PATCH 6/6] docstring typos

---
 .../dash-core-components/src/components/RangeSlider.react.js  | 2 +-
 .../dash-core-components/src/components/Slider.react.js       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index e084d26ff6..93dbf015d6 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -147,7 +147,7 @@ RangeSlider.propTypes = {
          *     return value * 10;
          * }
          * ```
-         * Then in the component `tooltip={'transform': 'multByTen'
+         * Then in the component `tooltip={'transform': 'multByTen'}`
          */
         transform: PropTypes.string,
     }),
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index 5d3c6b9237..7e642591c2 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/components/dash-core-components/src/components/Slider.react.js
@@ -120,7 +120,7 @@ Slider.propTypes = {
         style: PropTypes.object,
         /**
          * Reference to a function in the `window.dccFunctions` namespace.
-         * This can be added in a scrip in the asset folder.
+         * This can be added in a script in the asset folder.
          *
          * For example, in `assets/tooltip.js`:
          * ```
@@ -129,7 +129,7 @@ Slider.propTypes = {
          *     return value * 10;
          * }
          * ```
-         * Then in the component `tooltip={'transform': 'multByTen'
+         * Then in the component `tooltip={'transform': 'multByTen'}`
          */
         transform: PropTypes.string,
     }),