Salad UI
- 1.3.0

Popover

The main popover component that manages state and positioning.

Read more Read less

Options

  • :id - Required unique identifier for the popover.
  • :open - Whether the popover is initially open. Defaults to false.
  • :use-portal - Whether to move content outside its root while open. Defaults to false.
  • :portal-container - CSS selector for portal target. Used only when :use-portal is true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.

Component events

  • :on-open - Fired when the popover opens.
  • :on-close - Fired when the popover closes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
open :boolean

Whether the popover is initially open
false
use-portal :boolean

Whether to render the popover in a portal
false
portal-container :string

Portal container selector when use-portal is enabled
class :string
on-open :any

Handler for popover open event
on-close :any

Handler for popover close event
rest :global
Required inner_block * :slot 
<div id="popover-portal-target"></div>
<.popover_trigger as={&button/1} variant="outline">
  Open in portal
</.popover_trigger>
<.popover_content side="bottom" align="start" class="w-64">
  <div class="space-y-2">
    <h4 class="font-medium leading-none">Custom portal container</h4>
    <p class="text-sm text-muted-foreground">
      This content is moved into <code>#popover-portal-target</code> while open.
    </p>
  </div>
</.popover_content>