[FEAT REQ] Render tooltips inside portal about react-tooltip

[viveleroi]

I went ahead and wrote a custom tooltip component because like you said I was spending more time trying to make this work for our needs. Plus we needed it done for a big demo and this and several other things just made more sense to solve with a custom component. Plus we could better define style variations based on our branding spec which was a bit of a pain point too.

The demo looks like it would work, as long as it also works with selectors and such I think it's good.

[viveleroi]

Per the comments in #1164 - you have two options I guess.

1. Implement the portal logic yourself. Several libraries like blueprintjs do this, but it can be annoying to deal with when you have several libraries all with their own portals, especially if you need things to mix z-index-wise. That's not the case here, nothing should ever be above tooltips. You would use createPortal and render the tooltip to that so it's not rendered inside the react tree and this position: fixed is never subject to anything but the viewport.
2. Allow users to provide their own portal. For example I have a component called Portal that renders any children to our own react portal. So if there's a way to customize the tooltip renderer, I can render the tooltip as a child of that Portal component.

This is psuedo-code but maybe a render prop that gives me the tooltip you will render, but returns a ReactNode:

<Tooltip render={(Tooltip) => <Portal><Tooltip /></Portal>} />

[gabrieljablonski]

This is psuedo-code but maybe a render prop that gives me the tooltip you will render

Exposing the "pre-rendered" tooltip through the render prop is quite an interesting idea. It might work as a placeholder until (or if) we start using portals internally.

Will try to work on this over the next few days whenever I have the time.

Thanks for the suggestion!

[gabrieljablonski]

Were you able to use the tooltip with your own portal?

As far as I can tell, with this simple example, it should work just fine with createPortal().

Can you provide a quick example similar to how the storybooks you mentioned work? So I can have some reference to the tooltip being misplaced.

We might try using portals internally for the next major version (not sure how viable that will be yet), but, as I've said, it'd be nice to have a ready-to-go example on how to do it manually for V5.