Footnotes that
don’t interrupt reading

littlefoot replaces clunky footnote links with elegant, accessible popovers. No dependencies. ~3 KB gzipped.

npm install littlefoot See it in action →

Why littlefoot?

Everything you need, nothing you don’t

Interactive demo

Try it yourself

Touch the footnote buttons in the article, then tweak the settings panel live.

The invention of the printing press[1] in the fifteenth century marked a turning point in human history. For the first time, information could be reproduced at scale[2], accelerating the spread of literacy, science, and political thought across Europe and beyond.

The consequences for organised religion were profound[3]. Within decades, vernacular Bibles were in circulation, fuelling the Protestant Reformation and permanently fracturing the unity of Western Christendom.

Get started

Up and running with three lines of code

Optimised for Markdown extended footnote syntax.

// 1. Install
npm install littlefoot

// 2. Import styles
import 'littlefoot/dist/littlefoot.css'

// 3. Initialize
import { littlefoot } from 'littlefoot'
littlefoot()

API

Options

Pass any of these to littlefoot().

Option Type Default Description
activateOnHover boolean false Show popovers on mouse hover instead of click.
allowMultiple boolean false Allow multiple popovers open at the same time.
dismissOnUnhover boolean false Auto-close popovers when the mouse leaves the button.
dismissOnDocumentTouch boolean true Close all popovers when the user taps outside of them.
activateDelay number 100 Delay in ms before a popover appears after activation.
dismissDelay number 100 Delay in ms before a popover is removed from the DOM.
hoverDelay number 250 Timeout in ms before dismissing a hovered popover.
allowDuplicates boolean true Allow the same footnote to be used by multiple buttons.
anchorPattern RegExp /fn|note/gi Regex pattern for detecting footnote anchor links in the document.
anchorParentSelector string 'sup' CSS selector for the parent of footnote links — usually removed after processing.
scope string '' CSS selector to limit littlefoot to a specific region of the page.
numberResetSelector string '' CSS selector for elements where footnote numbering restarts at 1.
buttonTemplate string [1] HTML template for the footnote button. Supports <% number %>, <% reference %>, <% content %>.
contentTemplate string [2] HTML template for the popover content. Supports <% content %>, <% id %>, <% number %>.
activateCallback function undefined Called after a popover is activated. Receives the popover element.
dismissCallback function undefined Called after a popover is dismissed. Receives the popover element.

Methods

littlefoot() returns an object with these methods.

Method Signature Description
activate (id: string, delay?: number) => void Programmatically open a footnote popover by button ID.
dismiss (id?: string, delay?: number) => void Close a specific popover, or all open popovers if id is omitted.
getSetting (key: keyof Settings) => any Read the current value of a setting.
updateSetting (key: keyof Settings, value: any) => void Change a setting after initialisation.
unmount () => void Remove littlefoot and restore the original document.