-
-
Notifications
You must be signed in to change notification settings - Fork 529
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
Comments
Per the comments in #1164 - you have two options I guess.
This is psuedo-code but maybe a render prop that gives me the tooltip you will render, but returns a ReactNode:
|
Exposing the "pre-rendered" tooltip through the Will try to work on this over the next few days whenever I have the time. Thanks for the suggestion! |
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 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. |
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. |
Much appreciated for the provided example |
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" forposition: 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.
The text was updated successfully, but these errors were encountered: