Python Dash Slider使用tooltip参数拖动时报错求助

Problem Breakdown #

The error occurs because you're using an older version of Dash (specifically the 1.x series, evidenced by dash_renderer.dev.js?v=1.0.1 in your stack trace). Even though you only specified always_visible: True in your tooltip config, when dragging the slider, the component internally tries to add a visible: true key which isn't allowed by the prop validation rules of that older version. This mismatch triggers the validation error you're seeing.

Solutions #

1. Upgrade Dash Dependencies (Recommended)

The simplest and most permanent fix is to upgrade your Dash packages to the latest versions, where this tooltip validation bug has been resolved. Run this command in your terminal:

pip install --upgrade dash dash-core-components dash-html-components

After upgrading, your original code will work exactly as expected: the tooltip will stay visible while dragging and remain on screen even when you move your mouse away from the slider.

2. CSS Workaround for Older Versions

If you can't upgrade dependencies right now, you can achieve the "always visible tooltip" effect using custom CSS instead of the tooltip parameter. This bypasses the component's prop validation entirely:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)

# Inject custom CSS to force tooltip visibility
app.css.append_css({
    'external_url': 'data:text/css;charset=utf-8,'''
    .rc-slider-tooltip {
        visibility: visible !important;
        opacity: 1 !important;
    }
    '''
})

app.layout = html.Div([
    dcc.Slider(
        id='my-slider',
        min=0,
        max=20,
        step=0.5,
        value=5
        # Remove the problematic tooltip parameter
    ),
    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)

The CSS rule overrides the default tooltip visibility behavior, making it stay visible at all times without triggering any validation errors.

Verification #

• After upgrading, run your original code: the tooltip will behave as intended, showing the current value during drag and remaining visible afterward.
• With the CSS workaround, the tooltip will also stay visible, and you won't see any errors in the browser console.

内容的提问来源于stack exchange，提问作者Jonny_y