[FEAT REQ] Render tooltips inside portal

[viveleroi]

Rendering tooltips inside a portal would resolve issues caused position absolute/fixed. Fixed works in most cases, but some libraries like Storybook use transform/scale on their story containers which counts as a new "container" for position: fixed elements. This causes the tooltip to render incorrectly in auto-generated storybook documents because the x/y are based in the viewport, but the container is no longer the viewport. The tooltips appear at incorrect locations and often cause overflow/scrolls in storybook.

Rendering in portals is a common solution to this, our context/dropdown menu and select input libraries use this for rendering the menus.

[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.

[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.

[minedun6]

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.

Much appreciated for the provided example