shadcn.io is not affiliated with official shadcn/ui
Hover Card Footnotes Blog Block for React
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 Base 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.
Related
- Pro
Scrolling Article Table of Contents Blog
Article partsA framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
- Pro
Scroll Panel Glossary Blog
Topics and indexesA glossary in a fixed-height scroll panel: sticky letter headings, a part-of-speech tag per term, See also buttons that open a hover card and scroll to the term, and a posts link.
- Pro
Citable Publications About
Press and recognitionA bibliography for a research platform: eight publications as a numbered list in citation form, a type filter, and a Cite button on each row that copies the reference.
- Pro
Hover Preview FAQ
Ways to revealA FAQ for a courier tracking portal where hovering or focusing a question shows a hover card with a one-line summary, and opening it shows the full answer.
- Pro
Post Footer Blog
Article partsThe end of an article: tags as links, a share cluster whose Copy link really copies, an author panel beside Published and Updated dates, and Previous and Next as two cells on a shared hairline with arrow key hints.
- “Pro
Quote Card Share Blog
Reader feedbackA quote-card builder: pick one of three sentences from an issue and a drawn typographic card shows it, with Copy quote and Copy link buttons that really copy and a Send by email link.