Issue
I'm working with React Force Graph (2D - https://github.com/vasturiano/react-force-graph) and trying to display custom tooltip on node hover.
This custom Tooltip (dummy component) would display data that's not returned by node - I'd like to add some details to the tooltip, and those are not stored in node data that's returned for example by onNodeHover).
I've seen that I could use nodeLabel which displays simple text label... but it accepts only strings and some simple string interpolations. Unfortunately I can't pass a component as params.
Does anyone know what would be a good approach to this? How this could be handled? Extra points for working examples :D
Solution
So here's the answer:
- nodeLabel doesn't accept React Node but can easily accept string. So workaround for that problem is just passing the whole stringified html code to nodeLabel and RFG will handle that! This is the best solution I believe (althou native RFG tooltip doesn't support left/right - top/bottom switching in case tooltip would be cut by the edge of screen, but thats minor problem).
- other solution that I wouldn't recommend would be to create useCursorPosition and whenever onNodeHover returns something else than null we can set state of displayNode to true (and display it conditionally based on this state) in positions returned by useCursorPosition. This solution is flaky thou, because sometimes onNodeHover doesn't return null I user scrolls fast outside the canvas boundaries (hence the tooltip stays displayed forever). In this solution it's also recommended to use requestAnimationFrame to limit the listener on cursor position.
Answered By - stackustack
Answer Checked By - - Jay B. (ReactFix Admin)