Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT REQ] Render tooltips inside portal #1163

Open
viveleroi opened this issue Jan 27, 2024 · 5 comments
Open

[FEAT REQ] Render tooltips inside portal #1163

viveleroi opened this issue Jan 27, 2024 · 5 comments
Labels
Feature Request V6 It might get fixed/merged before, but most likely only on V6's release.

Comments

@viveleroi
Copy link

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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

gabrieljablonski commented Feb 10, 2024

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
Copy link
Author

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.

@gabrieljablonski gabrieljablonski added the V6 It might get fixed/merged before, but most likely only on V6's release. label Mar 3, 2024
@minedun6
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Request V6 It might get fixed/merged before, but most likely only on V6's release.
Projects
None yet
Development

No branches or pull requests

3 participants