[tooltip] Support detached triggers #3071
Conversation
michaldudak
added
type: new feature
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
michaldudak
force-pushed
the
tooltip-detached-triggers
branch
7 times, most recently
from
8d26554 to
28956f3
Compare
|
Super cool 🙌 
Does it look better if there isn't any whitespace padding that clips the content? It seems like the content should have padding instead of the popup? Also imo with the animation demo at the bottom, it'd be good to show varying widths. I remember it looked weird before (with the Popover one) if they were different, but it's more likely in the real world for the widths to vary quite a bit. If the transition transform amount needs to be manually adjusted for it to look good, ideally the demo should show that. (At least until we figure out an automatic method, maybe sizing CSS variables for the animation is needed) When using the keyboard, the content animations play, but not the other popup animations |
michaldudak
force-pushed
the
tooltip-detached-triggers
branch
2 times, most recently
from
ba51271 to
6bc2278
Compare
|
You're right. I updated the animations demo styles. |
| }, | ||
| "defaultTriggerId": { | ||
| "type": "string | null", | ||
| "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.", |
atomiks
left a comment
atomiks
left a comment
There was a problem hiding this comment.
Wasn't able to find any issues aside from some JSDoc tweaks - animation example looks perfect
github-actions
bot
added
the
PR: out-of-date
michaldudak
force-pushed
the
tooltip-detached-triggers
branch
from
e07abbf to
d799e0e
Compare
github-actions
bot
removed
the
PR: out-of-date
3 participants
Implemented detached / multiple trigger support in Tooltip, similarly to #2336
It is now possible to define triggers outside of Tooltip.Root using the handle prop. Multiple triggers per dialog with a dynamic payload are also implemented.
Delay groups created by Tooltip.Provider now apply to triggers (so when using detached triggers make sure the Tooltip.Trigger components are inside the Provider).
delayandcloseDelaywere moved from Tooltip.Root to Tooltip.Trigger, as they can be different per trigger.Playground: https://deploy-preview-3071--base-ui.netlify.app/experiments/tooltip/tooltips
Docs: https://deploy-preview-3071--base-ui.netlify.app/react/components/tooltip#detached-triggers
Closes #3032
Built on top of #3040