Universal Footnote Preview on Hover

WHAT IT DOES

This script scans the page for footnote markers—superscript numbers, links to footnotes, reference-style citations like [1], (1), or ¹—and displays a floating preview tooltip when you hover over a footnote reference. It extracts the footnote content from the page's footer section, references section, or matching IDs, matches it to the marker, and shows a tooltip with the full footnote text including citations and links. The script detects multiple footnote formats used in academic papers, blog posts, Wikipedia articles, and other content-heavy pages. You can customize the tooltip appearance (max width, font size), toggle preview on/off, and click on any footnote marker to copy its text to the clipboard.

WHERE IT RUNS

Works on any webpage with footnote-style references—academic articles, blog posts, Wikipedia, documentation, news sites, or any content with superscript numbers, bracket citations, or footnote links. The script uses pattern matching and DOM traversal to detect footnotes across different site designs.

HOW TO USE

The panel appears automatically when you visit a page. It detects footnotes and shows a count of how many were found. Hover over any footnote marker (superscript number, [1], (1), or a link to a footnote) to see a tooltip with the full footnote text. The tooltip follows your cursor and stays visible as long as you hover. Click any footnote marker to copy its content to your clipboard—a "Copied!" flash appears briefly. Use the "Enable Preview" toggle to turn the feature on/off. Adjust the tooltip width and font size using the controls in the panel. Click "Refresh Detection" to rescan the page for footnotes after dynamic content loads. The script works with academic citations, blog footnotes, and Wikipedia-style references.

TECHNICAL MECHANISM: MULTI-PASS FOOTNOTE DETECTION WITH MARKER-CONTENT MAPPING

The script uses a comprehensive detection strategy. First, it scans for superscript elements and checks if their text contains digits or roman numerals—these are treated as footnote markers. Second, it scans all links with href containing "footnote," "fn," "ref," or "note," capturing both the link element and its target ID. Third, it uses a TreeWalker to scan text nodes for patterns like [1], (1), and ¹, capturing the parent element as the marker. For footnote content, it searches for common footer containers (.footnotes, .references, .notes, etc.) and extracts numbered list items or paragraphs. It also directly resolves footnote content by ID (e.g., document.getElementById('footnote-1')). Each marker is mapped to its corresponding content, and hover events are attached to each marker element. The tooltip is a fixed-position div that appears on mouseenter with a 200ms delay on mouseleave to prevent accidental dismissal. Click events copy the footnote text to the clipboard using GM_setClipboard. All settings are persisted via GM_setValue.

THE PANEL

The footnote preview appears in a draggable, resizable panel that remembers its position per site. The panel shows the number of detected footnotes and provides controls for toggling preview, adjusting tooltip width, and changing font size. Drag by the header to reposition, collapse to a compact icon with a click, and resize using the bottom-right corner. The panel snaps to screen edges for tidy placement and closes with the Escape key. All settings—preview toggle, tooltip width, font size, and panel position—persist per website using GM_setValue, so your view returns exactly as you left it.

PLEASE NOTE

This script requires the free BotGentz extension to run. Footnote detection relies on the page using common footnote patterns—custom or non-standard implementations may not be detected. The tooltip is positioned based on cursor location and may overlap with other elements; adjust the tooltip width for better readability. Clicking a footnote marker copies the text content, which may include HTML formatting if the footnote contains links. The script does not read or transmit any data—all processing happens locally in your browser. The tooltip is designed for desktop use with mouse hover; touch devices may not trigger hover events reliably.