Tooltip not appearing on pie charts when cells re-render

I’m trying highlight the selected sector of a pie chart, and the following code works. The issue is that the tooltip won’t appear. If I remove the onMouseEnter and onMouseLeave events, then the tooltips show up fine. But of course, I can’t render the selected sector differently in that case. I think there’s an issue with tooltips not appearing when the Cells re-render.

<ResponsiveContainer
  width="100%"
  height={this.props.height}
>
  <PieChart
    width={diameter}
    height={diameter}
  >
    <Tooltip/>
    <Pie
      data={this.props.data}
      dataKey="value"
      onMouseEnter={(e, activeIndex) => this.setState({ activeIndex }) }
      onMouseLeave={() => this.setState({ activeIndex: -1 }) }
    >
      {
        _.map(this.props.data, (entry, i) => (
          <Cell
            key={`cell-${i}`}
            fill={COLORS.CONTRASTING_COLORS[i]}
            fillOpacity={this.state.activeIndex === i ? 1 : 0.25}
          />
        ))
      }
    </Pie>
  </PieChart>
</ResponsiveContainer>

I tried to fix this issue by “actively” controlling the tooltip, but that didn’t work either: https://github.com/recharts/recharts/issues/790

[zinroc]

Figured it out, this works for me:

<Tooltip content={<CustomTooltip />} wrapperStyle={{visibility: this.props.activePieSlice ? 'visible' : 'hidden'}} />

[gaurav5430]

active={true} does not seem to make any difference to the behaviour of the tooltip at all.

Is there a way to always show the tooltip?