React Recharts如何将默认Tooltip替换为自定义样式Tooltip

recharts 原生的 <Tooltip /> 组件预留了 content 配置项，支持传入自定义组件完全替换默认渲染逻辑，不需要额外绑定事件或者修改源码，就能实现你需要的自定义样式效果。

具体实现步骤 #

• 编写独立的自定义Tooltip组件，组件会自动接收Tooltip透传的核心参数：
  • active：布尔值，标识当前是否处于悬浮激活状态
  • payload：数组，包含当前悬浮位置对应的所有数据系列的数值、颜色、系列名等信息
  • label：当前悬浮位置对应的X轴坐标值
• 将写好的自定义组件传入 <Tooltip /> 的 content 属性，替换默认渲染即可，其余图表配置不需要改动。

核心代码示例 #

// 自定义Tooltip组件
const CustomTooltip = ({ active, payload, label }) => {
  // 未悬浮到有效数据点时不渲染内容
  if (!active || !payload?.length) return null;

  return (
    <div style={{
      background: '#ffffff',
      padding: '10px 14px',
      border: '1px solid #ebedf0',
      borderRadius: '4px',
      boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)'
    }}>
      {/* 顶部展示X轴分类/时间值 */}
      <p style={{ margin: '0 0 8px', fontSize: '14px', fontWeight: 500 }}>
        {label}
      </p>
      {/* 逐行展示各数据系列的数值 */}
      {payload.map((item, idx) => (
        <div 
          key={idx}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '6px',
            fontSize: '12px',
            lineHeight: 1.8,
            color: '#606266'
          }}
        >
          <span style={{
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            backgroundColor: item.color
          }} />
          <span>{item.name}：</span>
          <span style={{ fontWeight: 500, color: '#303133' }}>{item.value}</span>
        </div>
      ))}
    </div>
  )
}

// 图表中使用
// 原有图表的宽高、数据源、坐标轴、折线配置全部保持不变，只替换Tooltip部分
<LineChart width={600} height={300} data={chartData}>
  <XAxis dataKey="date" />
  <YAxis />
  <Legend />
  {/* 替换默认Tooltip为自定义组件 */}
  <Tooltip content={<CustomTooltip />} />
  <Line type="monotone" dataKey="visit" stroke="#5470c6" />
  <Line type="monotone" dataKey="order" stroke="#91cc75" />
</LineChart>

样式调整说明 #

你可以根据目标效果直接修改容器和内部元素的CSS样式，包括边距、颜色、圆角、阴影、排版结构都没有限制，完全可以匹配设计稿要求。如果需要对数值做格式化（比如加货币单位、百分比、保留小数位），直接在渲染item.value时做对应处理即可。
如果需要调整Tooltip的触发逻辑（比如点击触发）、悬浮偏移位置，直接给<Tooltip />组件添加官方提供的trigger、offset等属性即可，和自定义渲染逻辑不冲突。

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