Footnote Hover Preview — Free Accessible Popover Footnotes HTML CSS JS

Jumping to the bottom of a page to read a footnote and then scrolling back is the single worst part of footnotes on the web. This snippet fixes it with a preview popover that appears right next to the superscript marker on hover *or* keyboard focus, built in plain HTML, CSS, and vanilla JavaScript — no library, and no loss of the semantic footnote list at the bottom of the article.

One popover element, reused for every marker

Rather than creating a hidden popover per footnote, a single .fhp-popover div is created once and appended to document.body. Every reference marker's hover or focus event repositions and refills that one element with the relevant note's content — cheaper than managing dozens of individual popovers, and it means only one can ever be visible at a time.

The real footnote text lives in a real, visible list

The popover's content isn't duplicated data — noteTextFor() reads the innerHTML straight from the corresponding <li> in the semantic <ol class="fhp-notes"> at the bottom of the article. That list stays in the DOM and readable on its own (for print, for search engines, for anyone who prefers scrolling to the reference section), so the popover is a genuine enhancement, not a replacement for accessible markup.

Positioned near the marker, flips when it would run off-screen

positionPopover() centers the popover horizontally over the marker and places it above by default — but checks whether that would push the popover above the viewport's top edge, and flips it to appear below the marker instead when there isn't room, swapping which edge carries the little triangle pointer via the .fhp-above class. The horizontal position also clamps to stay within the viewport so a marker near the page edge never causes the popover to overflow off-screen.

Genuinely keyboard accessible, not hover-only

Every marker carries tabindex="0", and the exact same showFor()/scheduleHide() functions fire on focus/blur as on mouseenter/mouseleave — so a keyboard user tabbing through the article gets the identical preview experience a mouse user does, and Escape dismisses it and returns focus cleanly. The popover also carries role="tooltip" for assistive tech.

A short hide delay prevents flicker

scheduleHide() waits 120ms before actually hiding the popover, and that timer is cleared if the pointer or focus lands back on the reference (or on the popover itself) in that window — so briefly moving the mouse doesn't cause an annoying flash-hide-flash-show if the user is just repositioning within the same marker's area.

Customizing it

Make the popover itself scrollable-interactive content (a link inside it, say) since the mouseenter/mouseleave handlers on the popover already keep it open while hovered; adjust the vertical offset, colors, or add a small delay before showing to avoid popovers firing on quick mouse passes. Pair it with a pull quote or table of contents for a complete long-form article layout.