DevactionUI.HoverCard (devaction_ui v0.2.3)

Copy Markdown View Source

A card of more about a name, a number or a link (a person with a few figures, a pull request with what blocks it) that opens when the pointer rests on its trigger for 400 ms or the keyboard focus reaches it, and closes when both have left (DevactionUI.HoverCard hook). The trigger is the slot, drawn with a dotted underline; the card is the inner_block. It adds information and never the only way to do something: whatever is in it must also be on the page the trigger leads to.

It follows WCAG 1.4.13, like DevactionUI.Tooltip: it is dismissable (Esc closes it, and the Esc still reaches a dialog around it), hoverable (the card is part of what the pointer leaves, and closing waits close_delay ms, so the pointer can cross the gap and rest on the card) and persistent (it stays while the pointer or the focus is on the trigger or on the card). On a touch screen a tap on the trigger opens it, without following a link under the finger, and a tap anywhere else closes it. The card is kept inside the window, flipping to the other side and sliding along the trigger (DevactionUI.Tooltip takes the same measures from placement.js).

The trigger gets aria-describedby pointing at the card; without a focusable control in the slot the trigger itself joins the Tab order. The card is a group named by label. Everything is a span, so the card may sit inside a paragraph: give the content spans with block or flex, never divs.

Summary

Functions

card(assigns)

@spec card(map()) :: Phoenix.LiveView.Rendered.t()

Attributes

  • id (:string) (required)
  • label (:string) (required) - the name of the card, for assistive technology.
  • placement (:atom) - the side it prefers. Defaults to :bottom. Must be one of :top, or :bottom.
  • open_delay (:integer) - milliseconds of pointer on the trigger before it opens. Defaults to 400.
  • close_delay (:integer) - milliseconds before it closes after the pointer and the focus left. Defaults to 150.
  • underline (:boolean) - the dotted underline of the trigger. Defaults to true.
  • class (:any) - Defaults to nil.
  • trigger_class (:any) - more classes for the trigger. Defaults to nil.
  • card_class (:any) - more classes for the card, such as its width. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - what the pointer rests on: a name, a number, a link.
  • inner_block (required) - the content of the card.