Custom tooltip component does not take zIndex prop from chart theme

[zhikin2207]

Hi,

I've tried to change a zIndex of a custom tooltip and faced with the problem. Every tooltip is wrapped with one more component that has zIndex: 10, and it is not possible to change it from the chart theme.

codesandbox

I am not sure the issue in this part of the code, but it is very likely. Because when I pass { tooltip: { zIndex: 10000 } } to the theme, everything works fine (except compile errors).

Has someone faced with this issue?

[zhikin2207]

Temporary fix:

// @ts-ignore
theme={{ tooltip: { zIndex: 10000 } }}

[plouc]

It's a typing issue, theme.tooltip type (defined in @nivo/core, CompleteTheme) doesn't allow this, but the code does.

[gtibrett]

packages/tooltip/src/TooltipWrapper.tsx line 81 has the actual bug, if not just related.

Maybe ...theme.tooltip should be ...theme.tooltip.wrapper and theme updated to specifically allow this kind of extension?

[plouc]

Solved by #2552, it can now be customized via tooltip.wrapper.

[plouc]

It's been released in 0.86.0.