Hi!
I’m trying to create a reusable tooltip component (for svg elements), but I’m having problems understanding what would be the best approach.
This is the component I have so far:
Right now it works by getting the element and data ala d3. It searches for the nearest div element and append a new div element positioned in the coordinates returned by getBoundingClientRect. I prefer using a div for the tooltip instead of svg elements because they can expand outside of the svg canvas.
What I have done so far is not working very well: i) the positioning of the element seems to have some undesirable offsets (it looks they are coming from the positioning of the observable class of the root element. ii) having to rely on finding the parent div element seems weak as well.
I’m wondering if there is a better approach for this. Any advice would be welcome!