Tooltip does not work with dcc.graph indicator figure, but works with html.div. Using bootstrap

Dash Python
1

I cannot get the tooltip to work with a figure, it works with other titles, dcc graphs but not with a simple indicator. If I update the code while the “app.run” is running the tooltip appears, but no on the initial run. I am using bootstrap, but no css customizations. Win 11. dash version: 2.17.0
dcc version: 2.14.0, html version: 2.0.18, dash_table version: 5.2.11, plotly version: 5.22.0. This is the simple code.

from dash import dash, Dash, html, dash_table, dcc, Input, Output
import plotly
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
bgv1 = '#031728'
def create_graphs():        # Create graphs
    # Make graphs global vars
    global fig_saving_val
    # Saving number, value format are same as in python.
    fig_saving_val = go.Figure(go.Indicator(
        mode="number",
        number={'prefix': '$', "valueformat": ",", 'font_color': 'red'},
        value=100,
        title={'text': 'indicator title'}))
    fig_saving_val.update_layout(paper_bgcolor=bgv1, height=250, margin=dict(t=0, b=0),
                                 font={'color': "white", 'family': "Arial"}, autosize=True)
    return

def plot_results():     
    app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], meta_tags=[{'name': 'viewport',
                        'content': 'width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=1'}])
    app.layout = dbc.Container([
        dbc.Row([
            dbc.Col(html.Div([
                dbc.Row([(html.H3("Summary", className='text-center', id="analysis_title"))
                        ]),
                    dbc.Tooltip("Summary Tooltip",
                                target="analysis_title", fade=True, placement="top",
                                style={'color': 'white', 'background-color': bgv1}),
                dbc.Row(
                    dcc.Graph(figure=fig_saving_val, id="ind_saving_num",
                                  config={'displayModeBar': False, 'responsive': True})),
                    dbc.Tooltip("indicator tooltip.",
                                target="ind_saving_num"),
            ]), xs=10, sm=10, md=3, lg=3, xl=3)
        ])
    ], style={'background': bgv1, 'color': 'white', 'font-family': 'Arial'}, fluid=True)
    app.run(debug=True, host='127.0.0.1', port=8080)
    return

def display_plotly_versions():
    print(f"dash version: {dash.__version__}"),
    print(f"dcc version: {dcc.__version__}"),
    print(f"html version: {html.__version__}"),
    print(f"dash_table version: {dash_table.__version__}"),
    print(f"plotly version: {plotly.__version__}")
    return

def main():
    display_plotly_versions()
    create_graphs()
    plot_results()
    return

if __name__ == '__main__':
    main()
2

Hi @vallef welcome to the forums.

I can only provide a workaround, not an answer for your question. I would just wrap the wrap with a html.Div().

html.Div(
    id='graph_wrapper',
    children=dcc.Graph(
        figure=fig_saving_val,
        id="ind_saving_num",
        config={
            'displayModeBar': False,
            'responsive': True
        }
    )
)

and then use the div for the tooltip

dbc.Tooltip(
    "indicator tooltip.",
    target="graph_wrapper",
    placement="bottom",
)
3

Thanks it works, Can you explain what was going on, as mentioned the “second parse” when I update the code dynamically worked and the tooltip appeared. So it seems to be a interpreter problem/bug/idiosyncracy. I need to use/wrap in rows and cols as I have many indicators, quite verbose. But doable. Much appreciated.

This is what I did in the end;

app.layout = dbc.Container([
dbc.Row([
dbc.Col(html.Div([
dbc.Row([(html.H3(“Summary”, className=‘text-center’, id=“analysis_title”))
]),
dbc.Tooltip(“Summary Tooltip”,
target=“analysis_title”, fade=True, placement=“top”,
style={‘color’: ‘white’, ‘background-color’: bgv1}),
dbc.Row(html.Div(
id=‘graph_wrapper’,
children=dcc.Graph(
figure=fig_saving_val,
id=“ind_saving_num”,
config={‘displayModeBar’: False, ‘responsive’: True}
)
)),
dbc.Tooltip(
“indicator tooltip.”,
target=“graph_wrapper”,
placement=“right”,
)
]), xs=10, sm=10, md=3, lg=3, xl=3)
])
], style={‘background’: bgv1, ‘color’: ‘white’, ‘font-family’: ‘Arial’}, fluid=True)
app.run(debug=True, host=‘127.0.0.1’, port=8080)