[BUG] dcc.Tooltip children isn't clickable even with targetable=True
celia-lm opened this issue · comments
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)
Thanks for reporting, @celia-plotly .
@T4rk1n is this something we can quickly fix?
If not, @LiamConnors maybe we could at least make note of the workaround in the docs.
@Coding-with-Adam Yes should be an easy fix.