SaladUI.Popover (SaladUI v1.0.0)

Copy Markdown View Source

Enhanced implementation of popover component from https://ui.shadcn.com/docs/components/popover

Example:

<.popover id="profile-popover">
  <.popover_trigger>Open Popover</.popover_trigger>
  <.popover_content side="bottom" align="center">
    <div class="p-4">
      <h3 class="font-medium">Profile</h3>
      <p class="mt-2">View and edit your profile details</p>
    </div>
  </.popover_content>
</.popover>

Component events

  • :on-open - Maps the open event. Fired when the popover enters open state.
  • :on-close - Maps the close event. Fired when the popover enters closed state.

Popover is a pure client-side interaction (trigger click/outside click) and does not support SaladUI.LiveView.send_command/4.

Summary

Functions

popover(assigns)

The main popover component that manages state and positioning.

popover_content(assigns)

The popover content that appears when triggered.

popover_trigger(assigns)

The trigger element that toggles the popover.

Functions

popover(assigns)

The main popover component that manages state and positioning.

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.

Attributes

  • id (:string) (required) - Unique identifier for the popover.
  • open (:boolean) - Whether the popover is initially open. Defaults to false.
  • use-portal (:boolean) - Whether to render the popover in a portal. Defaults to false.
  • portal-container (:string) - Portal container selector when use-portal is enabled. Defaults to nil.
  • class (:string) - Defaults to nil.
  • on-open (:any) - Handler for popover open event. Defaults to nil.
  • on-close (:any) - Handler for popover close event. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

popover_content(assigns)

The popover content that appears when triggered.

Options

  • :side - Placement of the popover relative to the trigger (top, right, bottom, left). Defaults to "bottom".
  • :align - Alignment of the popover (start, center, end). Defaults to "center".
  • :side-offset - Distance from the trigger in pixels. Defaults to 8.
  • :align-offset - Offset along the alignment axis. Defaults to 0.
  • :class - Additional CSS classes.

Attributes

  • class (:string) - Defaults to nil.
  • side (:string) - Defaults to "bottom". Must be one of "top", "right", "bottom", or "left".
  • align (:string) - Defaults to "center". Must be one of "start", "center", or "end".
  • side-offset (:integer) - Distance from the trigger in pixels. Defaults to 8.
  • align-offset (:integer) - Offset along the alignment axis. Defaults to 0.
  • Global attributes are accepted.

Slots

  • inner_block (required)

popover_trigger(assigns)

The trigger element that toggles the popover.

Renders a native <button type="button"> by default. Set :as to an HTML tag or function component to render another trigger root.

Attributes

  • as (:any) - Defaults to "button".
  • type (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)