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>
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  </div>
</.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">Custom Trigger Example</h4>
    <p class="text-sm text-muted-foreground">
      You can use any element as a trigger, not just buttons
    </p>
  </div>
</.popover_content>