Add usePortal support to Tooltip component#3320
Merged
rossnelson merged 1 commit intomainfrom Apr 22, 2026
Merged
Conversation
Fixes tooltip clipping inside overflow-hidden containers by optionally rendering via the Portal component, anchored to the wrapper element with JS-tracked hover state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Collaborator
|
Might be the right time to convert Tooltip to Svelte5 |
andrewzamojc
approved these changes
Apr 22, 2026
| let wrapperElement: HTMLElement | null = null; | ||
| let isHovered = false; | ||
|
|
||
| $: portalPosition = ((): PortalPosition => { |
Contributor
There was a problem hiding this comment.
I know this is a pre-existing pattern so no change needed, but I wanted to put on record I think its weird to use boolean style props that can't be combined. Not the end of the world, and reads nice on the usage, but a position prop seems simpler.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
usePortalandscrollContainerprops to<Tooltip>following the same pattern Laura used for the<Menu>componentusePortalis true, the tooltip renders via<Portal>anchored to the wrapper element, escaping anyoverflow:hiddenancestoron:mouseenter/on:mouseleave) since the portal renders outside the DOM subtreegroup-hoverabsolute positioning whenusePortalis false (no breaking changes)Test plan
overflow:hidden— withusePortalthe tooltip should appear unclippedtop,bottom,left,right,topLeft,topRight,bottomLeft,bottomRight) work correctly withusePortalusePortalare unaffected