Makes targetable Tooltips interactive

[AnnMarieW]

closes #2752

This PR fixes the issue where it was not possible to interact with Tooltip content (like clicking on a button) without setting the pointer-events styling.

It sets pointer-events to auto on the tooltip content when targetable=True

TO DO:

• Add test. Should this PR target dash 3 or be deferred to dash 4?
• Update docs

Here is an app similar to the one @celia-lm used in the issue. It would make a good example for the docs too!

from dash import Dash, dcc, html, Input, Output, no_update, callback, ctx
import plotly.express as px


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(
    [
        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"},
)

# 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, no_update

    pt = hoverData["points"][0]
    bbox = pt["bbox"]

    return True, bbox


@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)