Popover @astryx-svelte/core v0.3.0 · Popover
Usage
A click-triggered overlay anchored to a button or trigger element. Use it for secondary actions, inline confirmations, or supplementary information that does not warrant a full dialog. For hover previews use HoverCard, for brief helper text use Tooltip.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep popover content focused on a single task or piece of information. |
| Do | Provide a clear way to close: either by clicking outside or with an explicit close button. |
| Don't | Nest popovers inside other popovers; it creates confusing focus and navigation. |
| Don't | Use a popover for content that requires heavy user input; use a Dialog instead. |
| Don't | Put too much content in a popover; if it needs scrolling, use a Dialog instead. |
Examples
Common configurations, variations, and states.Popover — Confirm Action
Inline confirmation popover for destructive actions with delete and cancel buttons.
Popover — Filter Panel
Popover with checkbox filters and apply/reset actions.
Popover — Keyboard Shortcuts
Popover displaying a list of keyboard shortcuts with key and description pairs.
Popover — Settings Panel
Popover with toggle switches for managing user preferences like notifications, dark mode, and sounds.