🜃 CSS Hover Footnote

282 2026-07-24 snippet

The trick behind the footnotes on this siteThe first entry. This site exists for gitminder as the daily-commit driver for two Beeminder goals, and it leans on wiki-links ,like colour-theory to connect ideas as they accumulate, in the tradition of a digital garden more than a blog.[^1]… and the hover previews in notes like Colour TheoryGruvbox's rainbow accent set doubles as the symbol taxonomy's colour legend, see values for the entry that started this. One per entry type: red for quotes, yellow for bookmarks, green for notes, blue for diary entries, purple for snippets, and… is the same adjacent-hover pattern, just with different content in the hidden span. It's AetherAnne's pattern for footnotes without JavaScript, wired through markdown-it's renderer overrides here instead of hand-written HTML:

.fn-wrapper {
  position: relative;
  display: inline-block;
}

.fn-content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  max-width: 30ch;
}

.fn-wrapper:hover .fn-content,
.fn-wrapper:focus-within .fn-content {
  display: block;
}

The reference and the hidden content are wrapped in one position: relative span. .fn-content needs a positioned ancestor to anchor position: absolute against, and same-level siblings don't count.

See Symbol TaxonomyI'm using single-character symbols, one per type as a quick visual cue: | type | symbol | example | | -------- | ------ | ------------------------ | | quote | > | on-writing-daily | | bookmark | ⚹ | eleventy-interlinker |… for other design patterns, and TransclusionTransclusion is including a document's content inside another by reference, rather than by copy, so the excerpt is from the source. Don't repeat yourself! Ted Nelson coined the term decades before wiki software made it common; Gwern.net is the best-known… for the other place this hover pattern is reused.