使用nivo/sunburst时ResponsiveSunburst组件tooltip不显示问题

数据老陈

2026-8-3

Nivo Sunburst 组件Tooltip无法显示问题排查与解决

我在使用nivo/sunburst组件时，想实现示例中的tooltip功能，但鼠标悬停在旭日图上时tooltip完全不显示。以下是我的代码：

<ResponsiveSunburst
  data={data}
  id="name"
  margin={{ right: 10, bottom: 10, left: 10, top: 10 }}
  value="loc"
  borderColor={{ from: 'data.color' }}
  arcLabelsRadiusOffset={0}
  arcLabelsTextColor={{ from: 'data.color' }}
  colors={{ datum: 'data.color' }}
  animate
  tooltip={() => <div style={{ backgroundColor: 'black' }}>as</div>}
/>

效果截图：
旭日图tooltip不显示效果

解决方法

修正tooltip函数参数：nivo的tooltip函数需要接收组件传递的参数（如datum），即使暂时不需要数据，保留参数占位也能确保组件正常触发tooltip：

tooltip={({ datum }) => (
  <div style={{ backgroundColor: 'black', color: '#fff', padding: '6px 10px' }}>
    <div>名称: {datum.name}</div>
    <div>LOC: {datum.loc}</div>
  </div>
)}

强制开启鼠标交互：显式添加enableMouseEvents={true}属性，确保组件响应鼠标悬停事件：
```
<ResponsiveSunburst
  // 其他属性...
  enableMouseEvents={true}
  tooltip={/* ... */}
/>
```
检查依赖版本：确认@nivo/sunburst与@nivo/core版本完全匹配，版本不兼容可能导致交互模块失效。
排查CSS遮挡：检查旭日图容器或父元素是否设置了pointer-events: none，或是有层级更高的元素覆盖图表，阻止了鼠标事件。