Popover

A click-triggered floating popover with arbitrary content, positioned by Floating UI.

<.popover></.popover>

Examples

With header and description

Trigger button opens a popover with a titled header.

<.popover id="example-popover">
  <:trigger><.button variant="outline">Open popover</.button></:trigger>
  <.popover_header>
    <.popover_title id="example-popover">Dimensions</.popover_title>
    <.popover_description id="example-popover">
      Set the dimensions for the layer.
    </.popover_description>
  </.popover_header>
</.popover>

Show code

Plain content

The inner block accepts arbitrary content — no header sub-components required.

<.popover id="plain-popover">
  <:trigger><.button variant="ghost">More info</.button></:trigger>
  <p class="text-sm text-muted-foreground">
    This popover holds any content you need — text, forms, or custom UI.
  </p>
</.popover>

Props

Name	Type	Default	Values
class	:string
id	:string
inner_block (slot)	:slot
trigger (slot)	:slot