Proposal to Add Portals For Tooltips

[payapula]

TL;DR: Can we check for the ability to "Portal" out the Tooltips, so that it won't be cut off when using charts inside scrollable containers?

Use Case

First, I have built quite a lot of charts using this awesome library, so thank you so much for building and maintaining this project. ❤️

In one of our designs, we have a Bar chart that is placed inside a scrollable container. We are using Custom tooltips to show additional information for each bar. The problem we faced is the tooltip displayed gets cut out at the very end of the scrollable containers.

Demo

To overcome this, I am using portal to move the tooltip outside the chart container. In order to place the tooltip next to the cursor, I am checking for the position of .recharts-tooltip-wrapper and copying that to the portal container. Finally, I am using coordinate from CustomTooltip and making it absolutely positioned to achieve the same effect. Please refer to the demo and the code below.

1. Default Tooltip Behaviour - Tooltip gets cut off.
2. Custom Tooltip Behaviour - Tooltip gets cut off.
3. Fixed (Hacked) Tooltip Behaviour - Tooltip portal outside the chart container.

Full repository for the above is here - https://github.com/payapula/recharts_tooltip/tree/main

Below is the code that does this logic

 React.useEffect(() => {
    const chartWrapper = chartContainerRef.current;
    const portalContainer = portalContainerRef.current;

    /**
     * Whenever user mouses over the chart, we are syncing the position of
     * `portalContainer` with the `defaultRechartsTooltipTargetElement`.
     */
    function handleMouseMove() {
      const defaultRechartsTooltipTargetElement =
        wrapperRef.current.querySelector(RECHARTS_DEFAULT_TOOLTIP_CLASSNAME);
      const rect = defaultRechartsTooltipTargetElement?.getBoundingClientRect();
      const tooltipTargetPos = Number(rect?.y?.toFixed(0));
      portalContainer.style.top = `${tooltipTargetPos}px`;
    }

    chartWrapper.addEventListener("mouseover", handleMouseMove);

    return () => chartWrapper.removeEventListener("mouseover", handleMouseMove);
  }, []);

I understand that, this is not the ideal solution to overcome this issue, and we are hacking into the internal class of recharts and syncing its position with our portal container 😅

The main reason for this is, the coordinate we get inside the CustomTooltip is relative to the .recharts-tooltip-wrapper.

Proposal

I wanted to get your ideas and suggestions on providing a portal target prop for tooltips, so that tooltips will be always visible even when the chart is inside scrollable container.

✨ An Example: Adding a portal prop that will take ref to the container element?

<Tooltip content={<CustomizedTooltip external={external} />} portal={portalRef} />

// portalRef points to the element that can contain the tooltip

One of the challenge I think will be to properly provide the x and y coordinates for the tooltip based on the portalRef.

Let me know your thoughts.!

Thanks Again ❤️

[ckifer]

Hi, this is done and will be released in 3.0!

[ckifer]

Also see #2458

[payapula]

Thanks for the quick response!

Found the exact PR - #4441, So, Closing this discussion!