A hover-triggered rich card built on client-side JS commands, Floating UI, and a small LiveView hook.
Like the tooltip, this is a portal-free, fully client-driven overlay opened by
hover rather than click: the ShadixHoverCard hook (assets/ts/hover_card.ts)
attaches mouseenter / focusin and mouseleave / focusout listeners to
the trigger, running the content's data-on-open / data-on-close
Phoenix.LiveView.JS commands (which run enter/leave transitions) and
positioning the content relative to the trigger with @floating-ui/dom
(computePosition + autoUpdate, bottom placement). There is no keyboard
navigation or click-outside handling — it simply follows the pointer/focus.
Trigger and content ids are derived from the required :id so data-trigger
and the JS targets line up stably.
Summary
Functions
Returns the Phoenix.LiveView.JS command that hides the hover card with id.
Renders a hover card with a :trigger slot and arbitrary card content.
Returns the Phoenix.LiveView.JS command that shows the hover card with id.
Functions
Returns the Phoenix.LiveView.JS command that hides the hover card with id.
Hides the content panel with a leave transition and dispatches
shadix:hover-card-close so the ShadixHoverCard hook stops positioning it.
Renders a hover card with a :trigger slot and arbitrary card content.
The trigger is wrapped in a display: contents span wired to mouse/focus
events, so the caller's own element opens the card without extra markup. The
content <div> carries the ShadixHoverCard hook and is positioned by
Floating UI at open time.
Attributes
id(:string) (required)class(:string) - Defaults tonil.
Slots
trigger(required)inner_block(required)
Returns the Phoenix.LiveView.JS command that shows the hover card with id.
Shows the content panel with an enter transition and dispatches
shadix:hover-card-open so the ShadixHoverCard hook positions it under the
trigger with Floating UI.