shadcn.io is not affiliated with official shadcn/ui
Hover Card Footnotes Blog Block for Radix UI
An annotated essay: numbered markers open a card with their note on hover and focus, jump to the note in an ordered list where the target note is tinted, and a link goes back to the exact place in the text.
Installation
Overview
An annotated essay for React with Radix UI, written for the Obelus Review, a magazine of annotated essays. A split behind a divider holds the title and three paragraphs at the start, each with small numbered markers. Hovering or focusing a marker opens a card with its note; activating it jumps to the note in the list at the end, which takes a tint while it is the target, and a "Back to text" link returns to the exact place in the essay. The notes are a real ordered list, so every note is readable without a card, and a marker is tied to its note with aria-describedby, so a screen reader announces the note when the marker takes focus. On a phone the list sits under the text. It uses HoverCard and Guides.
FAQ
How do I add a note?
Add an entry to NOTES at the top of the file and put <Marker number={n} /> where the marker belongs. The number is the note's position in the list: the card, the ordered list, the anchor ids and the back-link are all built from it, so keep the markers in order of appearance.
Is the note only in the hover card?
No: a card can't be tabbed into, so the note is also the list item the marker links to and the description a screen reader reads for the marker. The card is a convenience for sighted mouse and keyboard users, and it opens on focus as well as on hover. On a touch screen, tapping a marker follows its link to the note.
What is the tint on a note?
The browser's :target: when you follow a marker, its note becomes the page's target and gets a solid tinted background until you follow another link. "Back to text" targets the marker in the same way, and a note arrived at from the address bar (#obelus-note-3) is tinted too.
Does it move the page?
Following a marker or a back-link is an ordinary in-page link, so the browser scrolls to bring the target to the top of the window, as footnotes do on any page. Hovering or focusing a marker never scrolls.