Popover

A component that displays additional content or information in a small overlay when triggered.

Anatomy

Usage

<script>
  import {Popover} from 'ui-ingredients';
  import {XCloseIcon} from '$lib/icons';
</script>

<Popover.Root>
  <Popover.Trigger>Trigger</Popover.Trigger>
  <Popover.Positioner>
    <Popover.Content>
      <Popover.Arrow>
        <Popover.ArrowTip />
      </Popover.Arrow>

      <Popover.Title>Title</Popover.Title>
      <Popover.Description>Description</Popover.Description>
      <Popover.CloseTrigger>
        <XCloseIcon />
      </Popover.CloseTrigger>
    </Popover.Content>
  </Popover.Positioner>
</Popover.Root>

API Reference

Root

Prop	Default	Description
`autoFocus`	`true`	`boolean` Whether to automatically set focus on the first focusable content within the popover when opened.
`closeOnEscape`	`true`	`boolean` Whether to close the popover when the escape key is pressed.
`closeOnInteractOutside`	`true`	`boolean` Whether to close the popover when the user clicks outside of the popover.
`defaultOpen`		`boolean` The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
`id`		`string` The unique identifier of the machine.
`ids`		`{ anchor?: string; trigger?: string; content?: string; title?: string; description?: string; closeTrigger?: string; positioner?: string; arrow?: string; }` The ids of the elements in the popover. Useful for composition.
`initialFocusEl`		`() => HTMLElement` The element to focus on when the popover is opened.
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`modal`	`false`	`boolean` Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function invoked when the popover opens or closes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`		`boolean` The controlled open state of the popover
`persistentElements`		`(() => Element)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`portalled`	`true`	`boolean` Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
`positioning`		`PositioningOptions` The user provided options used to position the popover content

Anchor

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Arrow

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

ArrowTip

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

CloseTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-expanded`	Present when expanded
`data-part`	content
`data-placement`	The placement of the content
`data-scope`	popover
`data-state`	"open" \| "closed"

Description

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	indicator
`data-scope`	popover
`data-state`	"open" \| "closed"

Positioner

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Title

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	trigger
`data-placement`	The placement of the trigger
`data-scope`	popover
`data-state`	"open" \| "closed"

Accessibility

Keyboard Support

Key	Description
Space	Opens/closes the popover.
Enter	Opens/closes the popover.
Tab	Moves focus to the next focusable element within the content. Note: If there are no focusable elements, focus is moved to the next focusable element after the trigger.
Shift + Tab	Moves focus to the previous focusable element within the content Note: If there are no focusable elements, focus is moved to the trigger.
Esc	Closes the popover and moves focus to the trigger.