A click-triggered popover with arbitrary content, built on client-side JS commands, Floating UI, and a small LiveView hook.
Like the dropdown menu, this is a portal-free, fully client-driven overlay. The
trigger toggles the popover content with toggle_popover/1 (a
Phoenix.LiveView.JS builder with enter/leave transitions); the
ShadixPopover hook (assets/ts/popover.ts) watches the content's visibility
via a MutationObserver, positions it relative to the trigger with
@floating-ui/dom (computePosition + autoUpdate, bottom/flip/shift),
and closes on Escape or outside pointerdown via the data-on-close JS
(hide_popover/1). Unlike the menu, the content is arbitrary, so there is no
arrow-key item navigation.
Trigger and content ids are derived from the required :id so aria-controls,
data-trigger, and the JS targets line up stably.
Summary
Functions
Returns the Phoenix.LiveView.JS command that closes the popover with id.
Renders a popover with a :trigger slot and arbitrary content.
Popover description. Pass the popover's :id so the description renders with
"#{id}-description", matching the content panel's aria-describedby.
Header region of a popover; stacks title/description with sensible spacing.
Popover title. Pass the popover's :id so the title renders with
"#{id}-title", matching the content panel's aria-labelledby and giving
screen-reader users the popover's accessible name.
Returns the Phoenix.LiveView.JS command that toggles the popover with id.
Functions
Returns the Phoenix.LiveView.JS command that closes the popover with id.
Hides the content panel with a leave transition. Used by the hook's
data-on-close (Escape / outside click).
Renders a popover with a :trigger slot and arbitrary content.
The trigger is wrapped in a display: contents span wired to toggle_popover/1,
carrying the popover's ARIA wiring. The content <div role="dialog"> carries
the ShadixPopover hook and is positioned by Floating UI at open time.
Attributes
id(:string) (required)class(:string) - Defaults tonil.
Slots
trigger(required)inner_block(required)
Popover description. Pass the popover's :id so the description renders with
"#{id}-description", matching the content panel's aria-describedby.
Attributes
id(:string) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Header region of a popover; stacks title/description with sensible spacing.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Popover title. Pass the popover's :id so the title renders with
"#{id}-title", matching the content panel's aria-labelledby and giving
screen-reader users the popover's accessible name.
Attributes
id(:string) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Returns the Phoenix.LiveView.JS command that toggles the popover with id.
Toggles the content panel's visibility with enter/leave transitions. The
ShadixPopover hook reacts to the resulting visibility change to position the
popover and wire up Escape/outside-click handling.