Python Plotly如何实现点击数据点而非悬停触发显示悬停提示

要实现点击数据点才显示并固定悬停文本、点击其他点自动切换的效果，核心分为两步：关闭默认的鼠标悬停提示，再绑定点击事件手动控制提示文本的展示和切换。

完整可运行代码示例 #

import plotly.graph_objects as go
import dash
from dash import Input, Output, State, dcc, html, callback

# 模拟散点图数据
x_data = [1, 2, 3, 4, 5]
y_data = [2, 1, 4, 3, 5]
# 自定义每个点的提示文本
point_tooltips = [f"x={x_data[i]}, y={y_data[i]}" for i in range(len(x_data))]

# 初始化散点图，关闭默认悬停提示
fig = go.Figure(
    go.Scatter(
        x=x_data,
        y=y_data,
        mode='markers',
        marker=dict(size=12),
        hoverinfo='skip'  # 禁用当前散点轨迹的默认悬停弹出
    )
)
fig.update_layout(hovermode=False)  # 全局关闭悬停模式

# 初始化Dash应用
app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(
        id='scatter-fig',
        figure=fig
    )
])

# 绑定点击事件回调，控制提示文本更新
@callback(
    Output('scatter-fig', 'figure'),
    Input('scatter-fig', 'clickData'),
    State('scatter-fig', 'figure'),
    prevent_initial_call=True
)
def update_fixed_tooltip(click_data, current_fig):
    # 获取当前点击的点的索引
    selected_idx = click_data['points'][0]['pointIndex']
    # 清空所有旧的固定提示注释
    current_fig['layout']['annotations'] = []
    # 给当前选中点添加新的固定提示
    current_fig['layout']['annotations'].append(
        dict(
            x=x_data[selected_idx],
            y=y_data[selected_idx],
            text=point_tooltips[selected_idx],
            showarrow=True,
            arrowhead=1,
            ax=0,
            ay=-40,  # 提示框固定在点上方40px位置
            bgcolor="white",
            bordercolor="#222222",
            borderwidth=1
        )
    )
    return current_fig

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

关键逻辑说明 #

• 禁用默认悬停：通过hoverinfo='skip'和hovermode=False两个配置，彻底关闭鼠标悬停自动弹出提示的默认行为
• 点击事件监听：利用Dash的clickData属性捕获用户点击的点信息，每次点击时先移除旧提示，再给当前选中点添加新的注释作为固定提示
• 静态HTML适配：如果不需要Dash服务，要生成独立可交互的HTML文件，可以给Figure添加内置JS点击事件监听，核心逻辑和上述回调一致，用JS完成注释的增删更新即可。

内容的提问来源于stack exchange，提问作者Rahat Zaman