SlopUI.Components.Popover (SlopUI v0.1.0)

Copy Markdown View Source

Anchored popovers with arbitrary content.

Summary

Functions

Renders a trigger button and an anchored, light-dismissable panel.

Functions

popover(assigns)

Renders a trigger button and an anchored, light-dismissable panel.

<.popover id="plan-info" title="What's included">
  <:trigger variant="ghost" size="sm">Details</:trigger>
  <p>Unlimited projects and 10 seats.</p>
</.popover>

With a title, the panel is a labelled non-modal dialog. Focus moves into the panel on open (first focusable element, else the panel) and returns to the trigger on close. Escape and outside clicks close it unless dismissable={false}.

Attributes

  • id (:string) (required)
  • title (:string) - Defaults to nil.
  • placement (:string) - Defaults to "bottom-start". Must be one of "bottom-start", "bottom", "bottom-end", "top-start", "top", or "top-end".
  • dismissable (:boolean) - Defaults to true.
  • padding (:string) - Defaults to "md". Must be one of "md", or "none".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - Accepts attributes:
    • style (:string)
    • variant (:string)
    • color (:string)
    • size (:string)
    • icon (:boolean)
    • aria_label (:string)
    • class (:any)
  • inner_block (required)