LifeDS

Component

Popover

Displays rich content in a portal, triggered by a button.

PopoverContentside: top · bottom · left · right — align: start · center · end
PopoverHeader / PopoverTitle / PopoverDescriptionoptional header slot
Playground

Basic — dimensions form

Basic — header, title, description

Alignments

align="start" · "center" · "end"

With form fields

RTL support

Tokens used

7 semantic tokens consumed by this component.

--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--foregroundForeground
text-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring