Popover

Aria
RTL

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

Popover

Anatomy

<Popover>
  <Popover.Trigger>...</Popover.Trigger>
  <Popover.Panel>...</Popover.Panel>
</Popover>

Default

Position

Trigger elements

Open popover

With close

Popover props
Name Type Required Default Description
id string Yes - Unique element's identifier
is_open boolean No false Whether or not the popover is open
default slot Yes - Content of Popover item, see Popover.Panel
trigger slot Yes - Trigger element of Popover item, see Popover.Trigger
class css_class No - Tailwind classes for custom styles
Popover.Panel props
Name Type Required Default Description
position top | bottom | left | right | top-start | bottom-start | left-start | right-start | top-end | bottom-end | left-end | right-end No top Set placement for popover
class css_class No - Tailwind classes for custom styles