Slider tooltips #564

wbrgss · 2019-06-08T19:21:14Z

This PR enables tooltips over dcc.Slider and dcc.RangeSlider handles, either on hover or always. Motivated by a customer request via @cldougl, but it's been desired in our open-source community as well.

Adds a new property tooltip that passes in parameters from tipProps, an object native to the rc-slider createSliderWithTooltip API. tipProps isn't very well documented but AFAIK it essentially mirrors the rc-tooltip API. See example of tipProps usage in React here.

wbrgss · 2019-06-08T19:22:59Z

package.json

@@ -36,7 +36,7 @@
    "moment": "^2.20.1",
    "prop-types": "^15.6.0",
    "ramda": "^0.24.1",
-    "rc-slider": "^8.3.1",
+    "rc-slider": "^8.6.11",


Necessary minor upgrade that adds the tipProps API (undocumented; last update to the changelog / HISTORY.MD is from 2016).

Seems like its repo has moved to https://github.com/react-component/slider - HISTORY.MD is still pretty sparse there, but tipProps appears to have been added back in 8.1.something. Anyway, I'm happy to have this up to date!

wbrgss · 2019-06-08T19:27:51Z

src/components/RangeSlider.react.js

@@ -152,6 +157,49 @@ RangeSlider.propTypes = {
     */
    pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

+    tooltip: PropTypes.oneOfType([


This is a pattern that @Marc-Andre-Rivet suggested to me. Example usage here in DataTable. However, it's not working for me, allowing e.g.

dcc.RangeSlider( id='my-range-slider', min=0, max=20, step=0.5, value=[5,10], tooltip={ 'foo': 'bar' # I expect this not to be allowed with the strict type-checking below } ),

Huh, not sure what's going on there, looks to me like that should work.

Note though that your last one, PropTypes.exact({visible, position}), actually encompasses both of the other two as well as {} since neither is required. Unless you specifically want to prevent tooltip={} from creating a tooltip (and to my mind that seems like a fine way for users to say "give me a default tooltip") I'd just use that last form by itself, no oneOfType.

Unless you specifically want to prevent tooltip={} from creating a tooltip

IIRC @Marc-Andre-Rivet did want to prevent this, but I could have misunderstood him. Regardless, I'm inclined to agree tooltip={} should be allowed. propTypes.exact seems to actually allow other types as well (not just objects), which is confusing to me, but that means any truthy value will result in a default tooltip.

As an aside, I'd like to be more informed about stricter type-checking with propTypes and the oneOfType / exact pattern — do you understand why the above doesn't work @Marc-Andre-Rivet ?).

alexcjohnson · 2019-06-09T01:32:28Z

src/components/RangeSlider.react.js

@@ -11,6 +11,9 @@ export default class RangeSlider extends Component {
    constructor(props) {
        super(props);
        this.propsToState = this.propsToState.bind(this);
+        this.DashSlider = props.tooltip
+            ? createSliderWithTooltip(Range)
+            : Range;


This will break if someone starts out with no tooltips and adds them later.

OK — I added this back to the render method; that should be fine right?

On second thought, putting this in the render() method will break dragging behavior (unfortunately my screen recorder can't record a cursor; I'm dragging after hovering on the handle):

I'm not sure I actually understand the problem with this in the constructor. If I have a hot-reload app, and I add/remove the tooltip prop in Range/RangeSlider, Dash will handle it fine. The only thing that will be reset is any value that has been changed via user interaction (i.e. dragging/clicking the handle).

This is a simple app I'm using to test

import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash(__name__) server = app.server app.layout = html.Div([ html.H1("Tooltips"), html.Br(), html.H1("Slider, always visible"), dcc.Slider( id='my-slider', min=0, max=20, step=0.5, value=10, tooltip={'always_visible': True} ), html.Br(), html.H1("RangeSlider, on hover"), dcc.RangeSlider( id='my-range-slider', min=0, max=20, step=0.5, value=[5,10], tooltip={'placement': 'bottom'} ), ]) if __name__ == '__main__': app.run_server(debug=True)

The problem is if tooltip is the output of a callback

Ah right, of course. I've added the same conditional to componentWillReceiveProps and tooltip callabacks + normal drag behaviour appear to be working correctly now.

src/components/Slider.react.js

alexcjohnson

Add a changelog entry, then 💃

CHANGELOG.md

alexcjohnson

💃

Marc-Andre-Rivet · 2019-06-11T17:48:11Z

src/components/Slider.react.js

+        * Determines whether tooltips should always be visible
+        * (as opposed to the default, visible on hover)
+        */
+        visible: PropTypes.bool,


visible: bool seems like a fuzzy name & type for hover vs. always visible

Yeah, I agree. I left it like that because that's the API underneath (see ~~"tooltip"~~ "visible"). But considering our discussion on not needing a 1-1 API match for DCC, if you'd rather have an alias i.e. visible = always_visible I'll add it.

I like always_visible: bool actually - you'd only use it when it's true since false is the default. And even if you did say always_visible: false, it's pretty clear that that's not the same thing as "never visible", which is the implication of visible: false.

OK, I've made the change.

LGTM - @Marc-Andre-Rivet are you comfortable with this?

Yup. All good.

wbrgss · 2019-06-12T02:49:13Z

src/components/RangeSlider.react.js

+         * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will
+         * in reality appear to be on the top right of the handle
+         */
+        placement: PropTypes.oneOf([


I made a mistake before setting the key as position, it should be placement

This is so we can use the `visible` prop in `tipProps`, introduced in `rc-slider` 8.6.1 (undocumented in the `rc-slider` repo's HISTORY.md) See react-component/slider#383

Adds support for hoverable and persistent (always visible) tooltips

wbrgss commented Jun 8, 2019

View reviewed changes

alexcjohnson reviewed Jun 9, 2019

View reviewed changes

src/components/Slider.react.js Outdated Show resolved Hide resolved

alexcjohnson approved these changes Jun 10, 2019

View reviewed changes

alexcjohnson reviewed Jun 11, 2019

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

alexcjohnson approved these changes Jun 11, 2019

View reviewed changes

Marc-Andre-Rivet reviewed Jun 11, 2019

View reviewed changes

wbrgss commented Jun 12, 2019

View reviewed changes

wbrgss added 15 commits June 12, 2019 15:55

Bump rc-slider minor version

4a1c16d

This is so we can use the `visible` prop in `tipProps`, introduced in `rc-slider` 8.6.1 (undocumented in the `rc-slider` repo's HISTORY.md) See react-component/slider#383

Add tooltip (basic tipProps alias) to Slider and RangeSlider

c920c02

Adds support for hoverable and persistent (always visible) tooltips

Remove test css class + undo loading_state propTypes reshuffle

6ffe732

Add propTypes variations template

ca42f0e

Put createSliderWithTooltip in constructor

90e2fd1

Change 'visible' tooltip propType to bool

fd7c768

Fix Slider.react.js 🍝 from RangeSlider

01a203e

Slider tooltip propTypes: oneOfType[] -> single exact

c2e16d3

Move Slider instantiation from constructor to render method

fb755c9

Spacing

37470e6

Add changelog entry for Slider/RangeSlider tooltips

592a5fb

Fix markdown syntax + parens

11292cb

Prettier (comment + ternary formatting)

0c08d79

visible -> always_visible; position -> placement

e6f8026

Add DashSlider conditional in componentWillReceiveProps

224ec57

wbrgss force-pushed the slider-tooltips branch from db942a6 to 224ec57 Compare June 12, 2019 20:00

wbrgss merged commit b72e8b6 into master Jun 12, 2019

wbrgss deleted the slider-tooltips branch June 12, 2019 20:30

alexcjohnson mentioned this pull request Jun 13, 2019

Fix tab disabled issue #568

Merged

wbrgss mentioned this pull request Jun 17, 2020

Enhancement: Slider component can display it's current value #324

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slider tooltips #564

Slider tooltips #564

wbrgss commented Jun 8, 2019

wbrgss Jun 8, 2019

alexcjohnson Jun 9, 2019

wbrgss Jun 8, 2019 •

edited

Loading

alexcjohnson Jun 9, 2019

wbrgss Jun 10, 2019

alexcjohnson Jun 9, 2019

wbrgss Jun 10, 2019

wbrgss Jun 12, 2019

alexcjohnson Jun 12, 2019

wbrgss Jun 12, 2019

alexcjohnson left a comment

alexcjohnson left a comment

Marc-Andre-Rivet Jun 11, 2019 •

edited

Loading

wbrgss Jun 11, 2019 •

edited

Loading

alexcjohnson Jun 11, 2019

wbrgss Jun 12, 2019

alexcjohnson Jun 12, 2019

Marc-Andre-Rivet Jun 12, 2019

wbrgss Jun 12, 2019

Slider tooltips #564

Slider tooltips #564

Conversation

wbrgss commented Jun 8, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbrgss Jun 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson left a comment

Choose a reason for hiding this comment

alexcjohnson left a comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Jun 11, 2019 • edited Loading

Choose a reason for hiding this comment

wbrgss Jun 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbrgss Jun 8, 2019 •

edited

Loading

Marc-Andre-Rivet Jun 11, 2019 •

edited

Loading

wbrgss Jun 11, 2019 •

edited

Loading