Salad UI

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.
  • :animation - Whether to animate the popover. Defaults to true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
open :boolean

Whether the popover is initially open
false
portal-container :string

The portal container to render the popover in
class :string
on-open :any

Handler for popover open event
on-close :any

Handler for popover close event
rest :global
Required inner_block * :slot 
<.popover_trigger>
  <.button variant="outline">
    Right Position
  </.button>
</.popover_trigger>
<.popover_content side="right" align="center" side-offset={8} class="w-64">
  <div class="grid gap-2">
    <h4 class="font-medium leading-none">Right Placement</h4>
    <p class="text-sm text-muted-foreground">
      This popover appears to the right of the trigger
    </p>
  </div>
</.popover_content>