如何在多层Plotly图表中仅显示顶层的Tooltip？

问题核心：使用Plotly Express制作的多层时间线中，顶层蓝色活动区域内hover时，部分位置会触发底层灰色区块的Tooltip，不符合“顶层活动仅显示自身Tooltip，底层区块仅显示自身Tooltip”的需求。

解决方案 #

问题根源在于Plotly默认会检测所有覆盖鼠标位置的trace并显示Tooltip，即使顶层trace存在。通过以下调整可实现预期效果：

1. 提升顶层活动轨迹的层级优先级：给活动轨迹设置更高的zorder，确保hover检测时优先选择顶层活动。
2. 设置hover模式为closest：让Plotly仅显示距离鼠标最近的trace的Tooltip。
3. 自定义Tooltip模板：确保每个轨迹只显示自身的Tooltip内容，避免混淆。

修改后的完整代码如下：

import plotly.express as px
import pandas as pd
import plotly.graph_objects as go

df_blocks = pd.DataFrame({
    "start": ["2023-09-01 10:00:00", "2023-09-01 16:00:00"],
    "end": ["2023-09-01 20:00:00", "2023-09-01 22:00:00"],
    "y": [0, 1],
    "tooltip": ["First block", "Second block"],
    "type": ["block", "block"]
})

df_activities = pd.DataFrame({
    "start": ["2023-09-01 10:00:00", "2023-09-01 14:00:00", "2023-09-01 16:00:00", "2023-09-01 17:00:00"],
    "end": ["2023-09-01 14:00:00", "2023-09-01 20:00:00", "2023-09-01 17:00:00", "2023-09-01 22:00:00"],
    "y": [0, 0, 1, 1],
    "tooltip": ["First activity", "Second activity", "Third activity", "Fourth activity"],
    "type": ["activity", "activity", "activity", "activity"]
})

fig_blocks = px.timeline(df_blocks, x_start='start', x_end='end', y='y',
                         hover_data=['tooltip'],
                         color="type",
                         color_discrete_map={"block": '#8C8C8F'},
                         )
fig_activities = px.timeline(df_activities, x_start='start', x_end='end', y='y',
                             hover_data=['tooltip'],
                             color="type",
                             color_discrete_map={"activity": '#85AFFF'},
                             )
fig_activities.update_traces(width=0.5)

# 合并图表并调整hover行为
fig_combined = go.Figure(fig_blocks)

# 给活动轨迹设置高zorder，确保顶层优先级，同时自定义Tooltip模板
for trace in fig_activities.data:
    trace.zorder = 10
    trace.hovertemplate = "%{customdata[0]}<extra></extra>"

fig_combined.add_traces(fig_activities.data)

# 设置hovermode为closest，仅显示最近轨迹的Tooltip
fig_combined.update_layout(
    hovermode='closest',
    yaxis={'type': 'category'}
)

# 给区块轨迹也自定义Tooltip模板
for trace in fig_combined.data:
    if trace.name == 'block':
        trace.hovertemplate = "%{customdata[0]}<extra></extra>"

fig_combined.show()

效果说明 #

• 当hover顶层蓝色活动区域时，仅显示活动的Tooltip。
• 当hover底层灰色区块未被活动覆盖的区域时，仅显示区块的Tooltip。
• 解决了活动区域内触发底层区块Tooltip的问题。

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