This is an example of how to render React component for Highcharts tooltip using React portals. See Chart.tsx
and Tooltip.tsx
files below. Latest Highcharts version is required for the example to work correctly (9.0.0 at the time of writting).
Codesandbox: https://codesandbox.io/s/highcharts-react-tooltip-ut1uy
Hello. Thanks for the example. I ran into a problem: my tooltip (children) has a dynamic height and width. It depends on the selected mode by the user. Backend sends less or more data. So the tooltip width can be either 150px or 300px. And the height will also increase.
The problem is the following: when choosing different user modes and rebuilding the tooltip, it retains its old top and left position when hovering over a chart point.
For example, the tooltip width was 300px on first render. The tooltip is displayed next to the plot point. Then the tooltip width was reduced to 150px. When hovering over the graph point again, the tooltip will be positioned quite far from the hover point.
The question has already been asked here: https://www.highcharts.com/forum/viewtopic.php?f=9&t=48218, but the solution is not fully developed, since the tooltip can fall outside the body.