Bug with tooltip={'Always_visible':True}

@JoseMarqueses wrote:

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.

Posts: 1

Participants: 1

Read full topic