Use dbc.Button or html.Button in dcc.Tooltip

Dash Python
1

Apparently when using Buttons within the children property of a dcc.Tooltip these buttons are not clickable. Is there any way to realize an interactive dcc.Tooltip with clickable buttons?

2

Hi,

you could use the dbc.Tooltip:

import dash
from dash import html, Input, Output
import dash_bootstrap_components as dbc


# app and layout
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
    [
        dbc.Button(
            'Click',
            id='btn'
        ),
        dbc.Tooltip(
            "Just a tooltip",
            target='btn',
            placement='right',
        ),
        html.Div(id='out')
    ],
)


@app.callback(
    Output('out', 'children'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def show(click):
    return f'Button has been clicked {click} times'


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

Thanks for your reply @AIMPED. However, it’s not exactly what I was looking for.

I need to be able to click a button that is inside a Tooltip component. It appears that this is possible by default when using a dbc.Tooltip. However, the problem with dbc.Tooltip is that it has no property bbox but can only be attached to dash components. What I need though is a tooltip that is attached to a vertical rectangle added to a plotly go graph by using fig.add_vrect. But a vertical rectangle is not a dash component (i.e. it cannot be assigned an id).

Anyways, I came up with a solution: I can use the dcc.Tooltip but have to adjust the CSS style of pointer-events to auto. I think that is also the solution to this this post on stackoverflow.

1 Like