dcc.Tooltip children isn't clickable even with targetable=True #2759
Description
Describe your context
- replace the result of
pip list | grep dashbelow
dash 2.14.2 dash-bootstrap-components 1.1.0 dash-core-components 2.0.0 dash-html-components 2.0.0 dash-mantine-components 0.13.0a2 dash-table 5.0.0 Describe the bug and expected behaviour
dcc.Tooltip children isn't clickable even with targetable=True, it's necessary to set style={'pointer-events':'auto'}
After reviewing the code, I believe L74 should look like L42 of the same file, that is, setting pointer-events: ${props.targetable ? 'auto' : 'none'} for .hover-content too, and not only in .dcc-tooltip-bounding-box
Related forum issues:
- https://community.plotly.com/t/is-there-a-way-to-disable-hovering-tooltip-and-make-tooltip-a-clickable-event/57489
- https://community.plotly.com/t/can-i-make-a-tooltip-stay-after-click/25353
- https://community.plotly.com/t/use-dbc-button-or-html-button-in-dcc-tooltip/73372/2
Screenshots
Screen recording: https://github.com/plotly/dash/assets/101562106/f15c893f-5f19-421e-9d2c-e62c14e8cd25
Code to reproduce the issue
from dash import Dash, dcc, html, Input, Output, no_update, callback from dash import Patch, State, ALL, MATCH, ctx import plotly.express as px import dash fig = px.scatter(x=[1,2,3], y=[1,2,1], text=['A', 'B', 'C']) fig.update_traces( hoverinfo="none", hovertemplate=None, marker=dict(size=40) ) fig.update_traces(textfont_color='white') app = Dash(__name__) app.layout = html.Div( children=[ html.H3('Change the RadioItems value to see both behaviours'), dcc.RadioItems(["default", "{'pointer-events':'auto'}"], 'default', id='control'), html.H3('Tooltip button callback output'), html.Div('No tooltip button clicked yet', id='out'), dcc.Graph( id="graph", figure=fig, clear_on_unhover=True ), dcc.Tooltip( id="tooltip", targetable=True, children=html.Button(id='hover-click', children='Click me!') ), ], style={'margin':'20px'} ) # change the tooltip style to show bug (default) and workaround @callback( Output('tooltip', 'style'), Input('control', 'value'), prevent_initial_call=True ) def update_style(val): if val == 'default': return None else : return {'pointer-events':'auto'} # adapted from https://dash.plotly.com/dash-core-components/tooltip#styling-tooltip-with-background-and-border-color @callback( Output("tooltip", "show"), Output("tooltip", "bbox"), Input("graph", "hoverData"), Input('hover-click', 'n_clicks'), ) def update_tooltip_content(hoverData, clicks): # close the tooltip when the button is clicked if ctx.triggered_id == 'hover-click': return False, no_update # keep the tooltip open if we move away from the point, until we hover over another point if hoverData is None: return no_update pt = hoverData["points"][0] bbox = pt["bbox"] return True, bbox # tooltip callback to show that is/isn't working @callback( Output('out', 'children'), Input('hover-click', 'n_clicks'), prevent_initial_call=True ) def save_changes(clicks): return f"Button has been clicked {clicks} times!" if __name__ == "__main__": app.run(debug=True)