SutraUI.Popover (Sutra UI v0.3.0)

View Source

A floating content panel that appears on click or keyboard interaction.

Popovers are used to display rich content in a floating panel that is positioned relative to a trigger element. Unlike tooltips, popovers are interactive and can contain buttons, forms, and other elements.

Supports dynamic positioning that automatically adjusts based on viewport boundaries to prevent the popover from being clipped.

Examples

<.popover id="user-popover">
  <:trigger>
    <button class="btn">User Info</button>
  </:trigger>
  <div class="p-4">
    <p>User details go here</p>
    <button class="btn btn-primary">View Profile</button>
  </div>
</.popover>

<.popover id="settings-popover" side="auto">
  <:trigger>
    <button class="btn">Settings</button>
  </:trigger>
  Settings content...
</.popover>

With dynamic button text

<.popover id="toggle-popover">
  <:trigger let={open}>
    <button class="btn">{if open, do: "Close", else: "Open"} Popover</button>
  </:trigger>
  Popover content...
</.popover>

Accessibility

  • Trigger has aria-expanded and aria-controls attributes
  • Popover content is hidden from screen readers when closed
  • Escape key closes the popover
  • Click outside closes the popover
  • Focus is managed appropriately

Summary

Functions

hide_popover(js \\ %JS{}, id)

Hides a popover by ID.

popover(assigns)

Renders a popover component.

show_popover(js \\ %JS{}, id)

Shows a popover by ID.

toggle_popover(js \\ %JS{}, id)

Toggles a popover by ID.

Functions

hide_popover(js \\ %JS{}, id)

Hides a popover by ID.

Examples

<button phx-click={PhxUI.Popover.hide_popover("my-popover")}>Close</button>

popover(assigns)

Renders a popover component.

Attributes

  • id (:string) (required) - Unique identifier for the popover.
  • side (:string) - Which side the popover opens on (auto for dynamic positioning). Defaults to "auto". Must be one of "top", "bottom", "left", "right", or "auto".
  • align (:string) - Alignment of the popover relative to the trigger. Defaults to "start". Must be one of "start", "center", or "end".
  • class (:string) - Additional CSS classes for the popover content. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • trigger (required) - The element that triggers the popover.
  • inner_block (required) - The popover content.

show_popover(js \\ %JS{}, id)

Shows a popover by ID.

Examples

<button phx-click={PhxUI.Popover.show_popover("my-popover")}>Open</button>

toggle_popover(js \\ %JS{}, id)

Toggles a popover by ID.

Examples

<button phx-click={PhxUI.Popover.toggle_popover("my-popover")}>Toggle</button>