CSS-Only Footnote Tooltips in Hugo

The blog now shows the text of a footnote when you hover over its citation number, so you can read a reference without jumping to the bottom of the page and back.1 It involves one Hugo partial and a few CSS rules. I’ve been envious of other blog’s footnote popovers that usually come from a JavaScript library such as Bigfoot or littlefoot, which assemble the bubbles in the reader’s browser. But I wanted to avoid using any of that in order to keep the site as simple as possible with only HTML and CSS. Hugo’s Markdown renderer, Goldmark, turns each [^1] reference into a superscript link and collects the footnote bodies into a list at the end of the article. The partial below takes the rendered page content, finds each footnote’s HTML in that list, and copies it into a hidden <span> placed beside every inline reference to it. CSS then reveals the span on mouse hover as a small popover above the citation. Because the copying happens during the build, the published page is plain HTML. The…