Adding tooltip to x/y axis tick labels

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

[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)

[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>
)}