nivo Restrict position of tooltips to within a certain viewport

There seems to be no way at the moment to manipulate the calculated position so the tooltip doesn't get cut off at the edges of the "viewport" (tooltip container, custom viewport or window): Screenshot 2023-07-28 at 14 31 19

Right now, tooltips are positioned using transform: translate(...) inside TooltipWrapper: https://github.com/plouc/nivo/blob/2671ca4df614190f597bb63030bb794d3106c36e/packages/tooltip/src/TooltipWrapper.tsx#L39-L69

Some implementation options:

User-land: add a transformTooltipPosition(x: number, y: number, tooltipWidth: number, tooltipHeight: number) prop and allow users of this library to implement their own logic.
Inside library: add a TooltipViewport context that can optionally be rendered at the desired location by library users and implement the positioning logic inside the library (keep the current behaviour if no context is available).
```
<TooltipViewport.Provider value={viewportRef}>
  <div ref={viewportRef}>
    ...
       <Bar ... />
    ...
  </div>
</TooltipViewport.Provider value={viewportRef}>
```

I'd be willing to help with the implementation if we land on an option.

Jul 28 '23 12:07 SimonVanneste

Would love to see this. Seems like keeping it inside the current viewport, so it adjusts its position instead of getting cut off, would solve this most of the time. Otherwise, it seems like the actual overflow:hidden point being the edge of the window, not the bounding-box of the chart itself, would solve a lot of real-life scenarios. A combo of the two would be ideal, imo.

Jul 31 '23 15:07 ollwenjones

Is TooltipViewport.Provider really required? Couldn't the library use createPortal to render the tooltip content as a child of <body> to avoid overflow issues?

Sep 20 '23 23:09 jamesarosen

I'm also keen to see a solution here. Great suggestions @SimonVanneste . My preference would be the transformTooltipPosition option but perhaps with more parameters so that the callback doesn't need to determine the overall chart size itself. I think the library already knows the chart size so it would be easy to pass that to the transform callback.

Oct 25 '23 13:10 nm2501

@jamesarosen yes, a portal would be better for when the edge of the chart is the problem, but the tooltip still needs to measure against the viewport to adjust its position, so it doesn't go off the edge of the browser window when an element is near the edge of the window.

Oct 26 '23 12:10 ollwenjones

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!