Hover card
A preview that hangs from a link when the pointer rests on it or the keyboard reaches it. The popover’s card and leader, opened by a short delay and put away by leaving.
Kit parts
Sources
Where an answer got what it says, as a card index. A citation is a small numbered tab printed after the sentence it supports; resting on it hangs a card with the source’s title, its site and a quoted line. At the foot of the answer, the sources are a references plate that opens to a numbered list.
Seats open in 11 days. Want one email that morning?
Anatomy
A cite is a tab, not a key. It sits a little above the baseline, after the full stop’s sentence, and darkens a step under the pointer.
Variants
- A cite in a sentence
- Its card
- The plate · closed
- The plate · open, one not reachable
- In a chat slip
States
- Rest
- Hover
- Focus
- Visited
- Not reachable
Props and options
| Name | Kind | Description |
|---|---|---|
| data-unreachable | attribute | A source the model cited but could not load: no link, “Not reachable” beside the site. |
| wireSources(root) | function | Names each cite from its row (“Source 2: Refunds and credits, handbook.lode.dev”) and hangs its card. Idempotent. |
| domainOf(url) | function | The site as printed: www. dropped, lower case; a bad URL comes back trimmed, never a throw. |
| printer.cite(n) · printer.sources(list) | method | Cite and list sources while an answer streams in a chat. |
Usage notes
Rest on a numbered tab, or Tab to it, to see its source. Press it to jump to the row in the list; “Back to the answer” brings you back. Escape puts a card away.
Accessibility
- A cite is a real link, named “Source 2: Refunds and credits, handbook.lode.dev”, so a screen reader hears what it points to, not just a number.
- Following a cite opens the plate and moves focus to its row; the row’s “Back to the answer” link returns focus to the cite.
- The card only repeats what the row says, so nothing is lost when it does not show: on touch it never opens and a tap follows the link.
- Focus hangs the card at once and Escape puts it away without moving focus.
- The list is an ordered list, so the numbers are announced once, by the list, and the printed tabs are hidden from assistive technology.
- Under reduced motion the card appears without travel and the jump to a row does not scroll smoothly.
Related parts
Chat
An AI chat as a teleprinter, with restraint: what you type sits in a recess; the answer prints on a perforated slip with an amber lamp at the print head; code comes up on display glass. Composer with attachments and a send key that becomes Stop.
Link
Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you press.