Popover component powered by the PhiaPopover vanilla JavaScript hook.

A popover is a floating panel anchored to a trigger element, revealed on click. Unlike a Tooltip, a popover can contain interactive elements such as forms, buttons, and links — it is essentially a lightweight modal panel anchored to an element rather than centered on the viewport.

The PhiaPopover hook handles:

• Click-to-toggle (open/close)
• Focus trap — Tab and Shift+Tab cycle within the open panel
• Escape key to close and return focus to the trigger
• Click-outside-to-close
• Smart viewport-edge positioning (flips or adjusts when near the edge)

Sub-components

Hook Setup

Copy the hook via mix phia.add popover, then register it in app.js:

# assets/js/app.js
import PhiaPopover from "./hooks/popover"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaPopover }
})

Basic Example — Inline Settings Panel

A common pattern: a settings button that opens a small panel with a form.

<.popover id="display-settings">
  <.popover_trigger popover_id="display-settings">
    <.button variant="outline">
      <.icon name="settings" class="mr-2" />
      Display Settings
    </.button>
  </.popover_trigger>
  <.popover_content popover_id="display-settings" position={:bottom}>
    <h3 class="font-semibold mb-2">Display options</h3>
    <.form phx-change="update_display" phx-submit="save_display">
      <.select name="density" label="Row density" options={["compact", "normal", "comfortable"]} />
      <.button type="submit" class="mt-3 w-full">Apply</.button>
    </.form>
  </.popover_content>
</.popover>

Example — Column Visibility Picker

A common data grid use case: show/hide table columns via a popover checklist.

<.popover id="column-picker">
  <.popover_trigger popover_id="column-picker">
    <.button variant="outline" size="sm">Columns</.button>
  </.popover_trigger>
  <.popover_content popover_id="column-picker">
    <p class="text-sm font-medium mb-2">Toggle columns</p>
    <.scroll_area class="max-h-48">
      <.checkbox
        :for={col <- @columns}
        name="column_visibility"
        label={col.label}
        checked={col.visible}
        phx-change="toggle_column"
        phx-value-column={col.key} />
    </.scroll_area>
  </.popover_content>
</.popover>

Example — Date Picker Integration

Popovers are used as the anchor panel in the DatePicker and DateRangePicker components. Here's the pattern:

<.popover id="dob-picker">
  <.popover_trigger popover_id="dob-picker">
    <.button variant="outline">
      {if @date, do: Calendar.strftime(@date, "%B %d, %Y"), else: "Pick a date"}
    </.button>
  </.popover_trigger>
  <.popover_content popover_id="dob-picker" position={:bottom}>
    <.calendar id="dob-cal" phx-change="set_dob" />
  </.popover_content>
</.popover>

Position Values

Differences from Tooltip and Dialog

Accessibility

• Trigger has aria-expanded (updated by hook) and aria-controls pointing at the content panel
• Content panel has role="dialog" and aria-modal="true" — this tells assistive technology to confine navigation to the panel while it is open
• Focus trap ensures keyboard users cannot accidentally navigate outside the popover while it is open
• Escape key closes the panel and returns focus to the trigger