Tooltipalternative
Use Tooltip for brief, non-interactive hintsPopover
Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.
Setup
import { Popover } from '@fragments-sdk/ui';Examples
Default
Basic popover with content
Loading preview...
With Form
Popover containing a form
Loading preview...
With Arrow
Popover with pointing arrow
Loading preview...
Positions
Popover on different sides
Loading preview...
Link Trigger
Use asChild with a non-button trigger element
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Popover trigger and content |
open | boolean | Not set | Controlled open state |
defaultOpen | boolean | false | Default open state (uncontrolled) |
onOpenChange | function | Not set | Called when open state changes |
modal | boolean | false | Whether to block page interaction |
Usage Guidelines
When to use
- Inline editing forms
- Rich preview content
- Filter panels
- Date/color pickers
- Content that needs more space than a tooltip
When not to use
- Simple hints (use Tooltip)
- Action lists (use Menu)
- Blocking user interaction (use Dialog)
- System notifications (use Toast or Alert)
Best practices
- Keep popover content focused and minimal
- Include a clear way to close (X button or action buttons)
- Position to avoid covering important content
- Use arrow to visually connect popover to trigger
- Popover.Trigger and Popover.Close support asChild for links/router-link components (single valid element child required)
Accessibility
- Focus is moved to popover content on open
- Closes on Escape key
- Focus returns to trigger on close