View Source SaladUI.Popover (SaladUI v1.0.0-beta.3)

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

Example:

<.popover id="profile-popover">
  <.popover_trigger>
    <.button variant="outline">Open Popover</.button>
  </.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>

Summary

Functions

The main popover component that manages state and positioning.

The popover content that appears when triggered.

The trigger element that toggles the popover.

Functions

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.
  • :animation - Whether to animate the popover. Defaults to true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.

Attributes

  • id (:string) (required) - Unique identifier for the popover.
  • open (:boolean) - Whether the popover is initially open. Defaults to false.
  • portal-container (:string) - The portal container to render the popover in. 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)
Link to this function

popover_content(assigns)

View Source

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".
  • align (:string) - Defaults to "center".
  • 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)
Link to this function

popover_trigger(assigns)

View Source

The trigger element that toggles the popover.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)