DevactionUI.Tooltip (devaction_ui v0.2.3)

Copy Markdown View Source

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

tooltip(assigns)

@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 (write Ctrl where the person is not on a Mac). Defaults to nil.
  • title (:string) - a heading: makes the rich variant. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)