XYChart tooltip customization

[sgianelli]

I'm working on implementing a chart in visx right now where I want to be able to customize the positioning of the tooltip component so that it doesn't follow the cursor. It seems like that should be possible, according to the docs, via useTooltip and showTooltip but I have failed get anything to show up when calling it.

Hopefully looking for an example or an explanation on how to correctly use tooltip contexts with XYChart.

Super trivial example using the example in the docs (let me know if this expires or something and I'll create an account): https://codesandbox.io/s/reverent-leaf-8o432?file=/Example.tsx

[williaster]

Hi @sgianelli I don't quite follow what you're trying to do, can you perhaps elaborate on

I want to be able to customize the positioning of the tooltip component so that it doesn't follow the cursor

does that mean you want a tool tip in e.g., a fixed location that shows up/gets hidden with the relevant data? it may not be a perfect fit, but have you looked at the advanced usage examples in the docs?

Also I'm going to convert this to a discussion since it's about usage rather than an issue.

[williaster]

here's a demo with a tooltip with updating data fixed in the upper left corner. easiest way I thought to do this was to

1. render the <TooltipProvider /> to access its default context
2. write a custom showTooltip to override the position specified by chart Series (which will always specify the position of the series shape being hovered/triggering the tooltip)
3. wrap the XYChart in another <TooltipContext.Provider> and pass along everything from the <TooltipProvider /> in [ssr] verify server rendering  #1, except use the override showTooltip