Visx: Adding tooltip to x/y axis tick labels

[AJK92]

Hi Guys,
I'm trying to add a Tooltip (MaterialUI) on <AxisLeft/> currently using tickComponent. Reason is that I'm getting lengthy characters in y axis and I need to trim it and show. But when the user hovers the axis label, we need to show the entire text.

Doesn't work -

tickComponent={ ({ formattedValue, ...tickProps }) => (
<Tooltip title="Test" arrow><text {...tickProps}>{formattedValue}</text></Tooltip>
)}

But if I remove the Tooltip wrapper, it will work.

Works-

tickComponent={ ({ formattedValue, ...tickProps }) => (
<text {...tickProps}>{formattedValue}</text>
)}

Also, if I don't use <text/> component and the {...tickProps}, then I have to manually code and position all the axis labels, I guess.
So is there any way to achieve this

Any thought on this ?

Thanks,
Abi

[kiranvj]

I guess this happens because you are mixing html (Tooltip component) with the SVG (text). One workaround would be to use the SVG title to show the tooltip

Example

tickComponent={ ({ formattedValue, ...tickProps }) => (
   <text {...tickProps}><title>Your tool tip here</title>{formattedValue}</text>
)}

[williaster]

I think @kiranvj is probably right that it's failing due to rendering HTML as a child of an SVG element. One alternative solution then would be to render the HTML tooltip inside a react Portal.

We actually export Portal and useTooltipInPortal from @visx/tooltip, I'll see if I can get a working example.

[williaster]

Here's a working demo. Likely can still optimize the size of the tick mouse target and the tooltip positioning / styles (should be able to use material styles inside the Portal if you need) but illustrates the general approach.

Just to explain the containerRef: in order for TooltipInPortal to position itself correctly, it needs to be able to figure out the needed page-level x/y offset, relative to the parent it will be rendered in. It uses react-use-measure under the hood which requires a ResizeObserver polyfill (see @visx/tooltip docs for more)

[AJK92]

Cool. Thanks @williaster for the quick response. I'll give it a try :)

[williaster]

Going to close this for now, please feel free to re-open if you have any more questions/issues!