A hover/focus tooltip built on client-side JS commands, Floating UI, and a small LiveView hook.
Like the hover card, this is a portal-free, fully client-driven overlay opened
by hover or focus rather than click. The ShadixTooltip hook
(assets/ts/tooltip.ts) attaches mouseenter / focusin listeners to the
trigger that run the content's data-on-open JS (show_tooltip/1) and
mouseleave / focusout listeners that run its data-on-close JS
(hide_tooltip/1), both with enter/leave transitions. While open the hook
positions the content above the trigger with @floating-ui/dom
(computePosition + autoUpdate, top placement, offset(4) / flip /
shift). 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 tooltip with id.
Returns the Phoenix.LiveView.JS command that shows the tooltip with id.
Renders a tooltip with a :trigger slot and the tooltip text as the
inner_block.
Functions
Returns the Phoenix.LiveView.JS command that hides the tooltip with id.
Hides the content panel with a leave transition.
Returns the Phoenix.LiveView.JS command that shows the tooltip with id.
Reveals the content panel with an enter transition. The ShadixTooltip hook
reacts to the resulting visibility change to position the tooltip above the
trigger with Floating UI.
Renders a tooltip with a :trigger slot and the tooltip text as the
inner_block.
The trigger is wrapped in a display: contents span so the caller's own
element opens the tooltip without extra markup. The content
<div role="tooltip"> carries the ShadixTooltip hook, the data-on-open /
data-on-close JS commands, and is positioned above the trigger by Floating UI
while open.
Attributes
id(:string) (required)class(:string) - Defaults tonil.
Slots
trigger(required)inner_block(required)