Bug with tooltip={'Always_visible':True}

Dash Python
1

this is an example code:

import plotly.express as px
import plotly as py
import numpy as np
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate


app = dash.Dash(__name__)


app.layout = html.Div([
    html.Div([
        dcc.RangeSlider(
                id='filter-slider',
                min=0,
                max=20,
                step=1,
                value=[0, 20],
                marks={
                    0: '0%',
                    20: '20%'
                },
                tooltip={'placement': 'top', 'always_visible': True},
                className='universe-filter-item-component'
            )
    ],style={'display':'{}'.format(None)},id="display1"),
    html.Div([
        dcc.RangeSlider(
                id='filter-slider2',
                min=0,
                max=20,
                step=1,
                value=[0, 20],
                marks={
                    0: '0%',
                    20: '20%'
                },
                tooltip={'placement': 'top', 'always_visible': True},
                className='universe-filter-item-component'
            )
    ],style={'display':'{}'.format(None)},id="display2"),
    html.Div([
        dcc.RangeSlider(
                id='filter-slider3',
                min=0,
                max=20,
                step=1,
                value=[0, 20],
                marks={
                    0: '0%',
                    20: '20%'
                },
                tooltip={'placement': 'top', 'always_visible': True},
                className='universe-filter-item-component'
            )
    ],style={'display':'{}'.format(None)},id="display3"),
    
    html.Button("Slider 1",id="slider1"),
    html.Button("Slider 2",id="slider2"),
    html.Button("Slider 3",id="slider3"),   
])

@app.callback(
    [Output('display1','style'),Output('display2','style'),Output('display3','style')],
    [Input('slider1','n_clicks'),Input('slider2','n_clicks'),Input('slider3','n_clicks')])
def show_sliders(slider1,slider2,slider3):
    ctx = dash.callback_context
    button = ctx.triggered[0]['prop_id'].split('.')[0]
    if slider1 or slider2 or slider3:
        if button == "slider1":
            return {'display':'block'},dash.no_update,dash.no_update
        
        if button == "slider2":
            return dash.no_update,{'display':'block'},dash.no_update
        
        if button == "slider3":
            return dash.no_update,dash.no_update,{'display':'block'}
    else:
        raise PreventUpdate
        
        
if __name__ == '__main__':
    app.run_server(debug=False)

If you have your sliders or range sliders in a hidden div, the tooltip is displayed. And if you display the third slider and then the first slider, tooltip is display in the same place until you hover the slider.

1 Like
2

Hi @JoseMarqueses,

did you manage to resolve this issue?