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
Is there a way to have the tooltip adapt to the content for each point? I'd like to render different content based on the based on the data for each point. Ideally I would also be able to render a different tooltip if the point is clicked. Currently the tooltip gets the dimensions from the first rendered tooltip and then the same dimensions are used for every other point. I've tried using
tooltip.refresh(...)
but I haven't seen any difference.Example, the second point has different tooltip content than the other: https://codesandbox.io/s/highcharts-react-tooltip-forked-jjxo43?file=/src/Chart.tsx