Components / Overlays

Popover native

A small panel anchored to its trigger, opened on press.

Replaces
HoverCard
Children
many
Loading the renderer…
Popover rendered by the React renderer on Web
Web React
Popover rendered by the SwiftUI renderer on iOS
iOS SwiftUI
Popover rendered by the Compose renderer on Android
Android Compose
Popover rendered by the gpui renderer on Desktop
Desktop gpui

View exponential-ui-popover, painted by each native renderer.

PropTypeDefaultDescription
openbindbooleanfalseWhether it shows; bind it.
sidetop | right | bottom | left"bottom"Preferred side of the trigger.
openOnpress | hover"press"Press, or hover over the trigger (press on touch).
NameKind
on.changeevent: runs an action
triggerslot: one component by id
Role
dialog
Semantics
dialog (non-modal)
KeysAction
EnterSpace on the triggeropen
Escapeclose and return focus to the trigger
–openOn hover also opens on trigger focus
Recipe parts
Popover/contentPopover/arrow
Keyed by
sideopenOn:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

Hover card

EXP-760: the pointer's preview (the catalog `Popover openOn: hover`): the opaque menu card (12 radius, card hairline, no blur, no shadow), 320 wide, padding 12, opening after 400 ms so a pointer crossing a dense list of #IDENT chips never flashes one, closing after 100 ms so the pointer can travel into it.

More

It carries the issue preview body (status · identifier · title · the first lines) and the account picker's usage preview; a tap on touch just activates the trigger, so the phones have none.

Webok
HoverCard / HoverCardContentpackages/ui/src/hover-card.tsx
iOSn/a

touch: a tap opens the issue, there is no hover preview

Androidn/a

touch: a tap opens the issue, there is no hover preview

Desktopok
issue_preview::IssuePreviewHostapps/desktop/crates/ui/src/issue_preview.rs