You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to use the Tooltip component from the component library and immediately ran into the issue where the tooltip is trying to render outside of the container and being truncated.
Normally I would rely on a "portal"-style feature to do this (https://react.dev/reference/react-dom/createPortal), but maybe I'm missing something else. Is there a way to get the tooltip to ignore the bounds of its container and render outside of it, and if not should this be a feature request for the Tooltip component? I suppose I could mess with overflow of all the containing nodes but that does not sound fun.
I had the thought that I could put the main "Tooltip" component up higher in my dom, since I learned I can do stuff like this:
Tooltip{key:"{key}",
div {"Can I put random stuff here? Yep! The whole layout could theoretically be in-between `Tooltip` and `TooltipTrigger`"TooltipTrigger{
span {class:"inline-flex items-center justify-center","{condition_icon(&applied.condition)}"}}}TooltipContent{side: dioxus_primitives::ContentSide::Left,ConditionTooltip{applied: applied.clone(),}}}
But it's unfeasible for me to have a Tooltip up near the root there for every place I'd want to use a tooltip, since each Tooltip can only have one TooltipTrigger. I think I really just want to be able to put a generic TooltipWrapper way up high in my component hierarchy that can be the parent of any number of tooltip contents (or just render the tooltip directly on the body tag).
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm trying to use the Tooltip component from the component library and immediately ran into the issue where the tooltip is trying to render outside of the container and being truncated.
Normally I would rely on a "portal"-style feature to do this (https://react.dev/reference/react-dom/createPortal), but maybe I'm missing something else. Is there a way to get the tooltip to ignore the bounds of its container and render outside of it, and if not should this be a feature request for the Tooltip component? I suppose I could mess with overflow of all the containing nodes but that does not sound fun.
I had the thought that I could put the main "Tooltip" component up higher in my dom, since I learned I can do stuff like this:
But it's unfeasible for me to have a Tooltip up near the root there for every place I'd want to use a tooltip, since each Tooltip can only have one TooltipTrigger. I think I really just want to be able to put a generic TooltipWrapper way up high in my component hierarchy that can be the parent of any number of tooltip contents (or just render the tooltip directly on the
bodytag).update: I just noticed that the components repo does have a
use_portalthat happens to be used by the Toast component. Would it make sense to also use this for Popover and Tooltip? https://github.com/DioxusLabs/components/blob/2901fd2d9e3374428d9a78244b10947038fe0d65/primitives/src/toast.rs#L130Beta Was this translation helpful? Give feedback.
All reactions