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.
Default Open in playground 
<.popover id="popover-single-default">
  <.popover_trigger as={&button/1} variant="outline">
    Open popover
  </.popover_trigger>
  <.popover_content side="top" align="center" side-offset={8} class="w-96 border-0 bg-transparent p-0 shadow-none">
    <.card>
      <.card_header class="p-4 pb-3">
        <.card_title class="text-base">Dimensions</.card_title>
        <.card_description>
          Set the dimensions for the layer.
        </.card_description>
      </.card_header>
      <.card_content class="p-4 pt-0">
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <.label for="width" class="w-20 shrink-0">
            Width
          </.label>
          <.input id="width" default-value="100%" class="h-8 min-w-0 flex-1"></.input>
        </div>
        <div class="flex items-center gap-3">
          <.label for="maxWidth" class="w-20 shrink-0">
            Max. width
          </.label>
          <.input id="maxWidth" default-value="300px" class="h-8 min-w-0 flex-1"></.input>
        </div>
        <div class="flex items-center gap-3">
          <.label for="height" class="w-20 shrink-0">
            Height
          </.label>
          <.input id="height" default-value="25px" class="h-8 min-w-0 flex-1"></.input>
        </div>
        <div class="flex items-center gap-3">
          <.label for="maxHeight" class="w-20 shrink-0">
            Max. height
          </.label>
          <.input id="maxHeight" default-value="none" class="h-8 min-w-0 flex-1"></.input>
        </div>
      </div>
      </.card_content>
    </.card>
  </.popover_content>
</.popover>
Popover placement relative to its trigger. Open in playground 
<.popover id="popover-placement-examples-top">
  <.popover_trigger as={&button/1} variant="outline">Top</.popover_trigger>
  <.popover_content side="top" align="center" side-offset={8} class="w-64">
    <p class="text-sm">Appears above trigger.</p>
  </.popover_content>
</.popover>
<.popover id="popover-placement-examples-right">
  <.popover_trigger as={&button/1} variant="outline">Right</.popover_trigger>
  <.popover_content side="right" align="center" side-offset={8} class="w-64">
    <p class="text-sm">Appears right of trigger.</p>
  </.popover_content>
</.popover>
<.popover id="popover-placement-examples-bottom">
  <.popover_trigger as={&button/1} variant="outline">Bottom</.popover_trigger>
  <.popover_content side="bottom" align="center" side-offset={8} class="w-64">
    <p class="text-sm">Appears below trigger.</p>
  </.popover_content>
</.popover>
<.popover id="popover-placement-examples-left">
  <.popover_trigger as={&button/1} variant="outline">Left</.popover_trigger>
  <.popover_content side="left" align="center" side-offset={8} class="w-64">
    <p class="text-sm">Appears left of trigger.</p>
  </.popover_content>
</.popover>
Portal container Open in playground 
<.popover
  id="popover-single-portal-container"
  portal-container="#popover-portal-target"
  use-portal
>
  <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>
</.popover>
Cross-axis alignment for bottom-placed popovers. Open in playground 
<.popover id="popover-alignment-examples-start">
  <.popover_trigger as={&button/1} variant="outline">Start</.popover_trigger>
  <.popover_content side="bottom" align="start" side-offset={8} class="w-64">
    <p class="text-sm">Aligned to trigger start.</p>
  </.popover_content>
</.popover>
<.popover id="popover-alignment-examples-center">
  <.popover_trigger as={&button/1} variant="outline">Center</.popover_trigger>
  <.popover_content side="bottom" align="center" side-offset={8} class="w-64">
    <p class="text-sm">Centered on trigger.</p>
  </.popover_content>
</.popover>
<.popover id="popover-alignment-examples-end">
  <.popover_trigger as={&button/1} variant="outline">End</.popover_trigger>
  <.popover_content side="bottom" align="end" side-offset={8} class="w-64">
    <p class="text-sm">Aligned to trigger end.</p>
  </.popover_content>
</.popover>