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

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?


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(
            "Just a tooltip",

    Output('out', 'children'),
    Input('btn', 'n_clicks'),
def show(click):
    return f'Button has been clicked {click} times'

if __name__ == '__main__':

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.