tooltip={'always_visible': True} doesn't work with slider

[jonyow]

I get an error when I use the tooltip={'always_visible': True} argument when creating a dash slider in python.

The error only appears when I move the slider.

When I remove the tooltip argument, the code runs fine (but I don't get the tooltip that I need).

# Here's a minimal example that reproduces the error

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__) 
app.layout = html.Div([
    dcc.Slider(
        id='my-slider',
        min=0,
        max=20,
        step=0.5,
        value=5,
        tooltip={'always_visible': True}
    ),
    html.Div(id='output-container-slider')
])

@app.callback(
    dash.dependencies.Output('output-container-slider', 'children'),
    [dash.dependencies.Input('my-slider', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

I would expect the tooltip to show the current value of the slider as it moves and the tooltip to persist even I move the mouse away.

Instead, I get this error:

Failed component prop type: Invalid component prop `tooltip` key `visible` supplied to Slider.
Bad object: {
  "visible": true
}
Valid keys: [
  "always_visible",
  "placement"
]

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
Error: Failed component prop type: Invalid component prop `tooltip` key `visible` supplied to Slider.

Bad object: {
  "visible": true
}

Valid keys: [
  "always_visible",
  "placement"
]

    at propTypeErrorHandler (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.1&m=1568039086:44125:11)

    at CheckedComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.1&m=1568039086:40498:9)

    at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:13073:18)

    at mountIndeterminateComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:15155:13)

    at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:15760:16)

    at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:19447:12)

    at workLoop (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:19487:24)

    at renderRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:19570:7)

    at performWorkOnRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:20477:7)

    at performWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.js?v=1.0.1&m=1568039086:20389:7)

Although I pass the correct key {'always_visible': True}, it seems to be getting overridden to 'visible' further down the line.

[byronz]

@jonyow thanks for the report, I was able to reproduce it with your sample.
the root cause is here

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

Lines 49 to 61 in 67ec2b7

	if (tooltip && tooltip.always_visible) {
	/**
	* 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 = Object.assign(tooltip, {
	visible: tooltip.always_visible,
	});
	delete tipProps.always_visible;
	} else {
	tipProps = tooltip;
	}

as a temporary workaround, you can disable the props check with dev_tools_props_check=False,
and it should have no issue in production

[jonyow]

Hi @byronz ,
I can confirm using dev_tools_props_check=False as a workaround fixes the issue for now.

app.run_server(debug=True, dev_tools_props_check=False )

Thanks very much for the help!