A short hint on hover and on keyboard focus, drawn by CSS and tied to its trigger by a small hook
(DevactionUI.Tooltip). The trigger is the slot; text is what it says. The hook puts aria-describedby
on the first focusable control inside the slot (the screen reader only reads the description of the focused
element, so it cannot sit on the wrapper) and lets Esc dismiss the hint while the pointer or the focus is
still there. It is for a name or a short explanation, never for something the person must read to continue:
on a screen with no hover it does not appear.
It appears on the four sides with an arrow towards the trigger, waits a moment before showing (so passing
over a button does not flash), can show the shortcut of the action as a key cap (DevactionUI.Kbd in its
inverse tone) and, with a title, is the rich variant: a heading and a paragraph in a wider box. Every
button that is only an icon should have one.
It follows WCAG 1.4.13: it is dismissable (Esc closes it, and so does a tap on a touch screen), hoverable
(the pointer can cross the gap and rest on the hint without it closing; a bridge fills the gap) and
persistent (it stays while the pointer or the focus is on the trigger or on the hint, until it is dismissed).
The hook measures the hint when it is about to show and keeps it on the screen: with no room on the
placement side it flips to the opposite side when that has more room, and it slides along the trigger,
with the arrow still pointing at it, when it would cross the edge of the screen. It looks at the window
only: an ancestor with overflow: hidden still clips it, so keep the trigger out of one.
Summary
Functions
@spec tooltip(map()) :: Phoenix.LiveView.Rendered.t()
Attributes
id(:string) (required)text(:string) (required)placement(:atom) - Defaults to:top. Must be one of:top,:bottom,:left, or:right.shortcut(:string) - the keys of the action, shown as a key cap:⌘K(writeCtrlwhere the person is not on a Mac). Defaults tonil.title(:string) - a heading: makes the rich variant. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)