[FEAT REQ] Easier way to attach tooltips to dynamically generated elements

[gabrieljablonski]

In v4, I was able to create a single <ReactTooltip /> somewhere on my application, and use the data-for prop to share that same tooltip across all text elements (for example) in a table. Since it doesn't seem to be any obvious way to do this in v5, I'm left with using wrapper components that generate an id (#836 is quite relevant here) for my anchor element, alongside the <Tooltip /> element.

I'm not sure if there is another way to do this aside from the data-* method, but it would definitely be very helpful, since that was a very convenient feature in v4. Anyway, I'll understand if this is something the package is trying to shy away from completely in v5.

Another alternative that would make things easier, would be to go the @mui/material route, and be able to use the tooltip as a wrapper to the anchor element, but I'm not sure how viable that would be for the v5 architecture.

[gabrieljablonski]

Btw, sorry for spamming a bit with opening issues. Started using the package a few days ago in my project, but almost dropped since I ran into a bug that was a deal-breaker.

Came here today looking for some guidance in the docs, and saw that v5 was released. Tried it out, and the bug was no more, so I decided to keep using it.

Aside from this and the other issues I've opened, v5 is working fine, so keep up the great work.

[gabrieljablonski]

Might not be the best idea, but I though of creating a <TooltipProvider /> and a useTooltip() hook to "subscribe" to a tooltip using refs. I believe this solves my problem.

If it works well, I'll submit a PR, but that might not be in line with the direction you want to take the project, since it'll introduce some overheads. You can take a look and decide then.

[gjvoosten]

In v4, I was able to create a single <ReactTooltip /> somewhere on my application, and use the data-for prop to share that same tooltip across all text elements (for example) in a table.

FWIW, our use-case is similar; we have charts (in SVG) where hovering over an item shows details in the single v4 tooltip. What would be the equivalent in v5?

[danielbarion]

Hi guys, thank you so much for the feedback and for the discussion.

When I was developing V5, I was thinking about that use case, and I think about adding a provider for just one instance of the v5 tooltip being used by the entire application, but in the end, I was thinking if that is not a project-specific thing, for example:

https://react-tooltip.com/docs/examples/state#controlled-tooltip-state

We can create a context provider in our project and control the anchor element reference like the controlled tooltip state docs, so, if we include this inside the package, this needs to be optional because I don't want to penalize a project that doesn't want to use like that.

@gjvoosten please let me know if you were able to use V5 as you want after checking this specific doc.

@gabrieljablonski if you can, please open a PR and I'll take a look as soon as possible.

[danielbarion]

Another alternative that would make things easier, would be to go the @mui/material route, and be able to use the tooltip as a wrapper to the anchor element, but I'm not sure how viable that would be for the v5 architecture.

Oh, I'll take a look, I want to keep the tooltip component simple, and because of that I created the controller component, but we can think of an elegant solution for this suggestion, I liked it too.

[gjvoosten]

please let me know if you were able to use V5 as you want after checking this specific doc.

Probably not, as that would involve having a Tooltip for each charting component (instead of the single, application-wide one we have now), and would also require a distinct id on each chart element (generated through d3).

[danielbarion]

Probably not, as that would involve having a Tooltip for each charting component (instead of the single, application-wide one we have now), and would also require a distinct id on each chart element (generated through d3).

Can you share more information @gjvoosten, please?

What I was thinking is:

1. Add a Context provider in the App
2. Add a tooltip using anchorId from the added context
3. Change anchorId value in context, this will reflect in tooltip and the tooltip will bind to the new anchorId

Does it make sense? Why do you need one tooltip for each charting component? I don't get this

[danielbarion]

https://react-tooltip.com/docs/examples/multiple-anchors