A jQuery plugin for creating exceptional footnotes.

  • By Chris Sauve
  • Last update: Dec 29, 2022
  • Comments: 16


by Chris Sauve

Bigfoot is a jQuery plugin that creates exceptional footnotes. Simply include the code on your pages and footnotes will be detected automatically and improved in the following ways:

  • Links to footnotes will be replaced with clickable/ tappable buttons, making them substantially easier to hit.

  • Footnote content will appear in a popover directly beside the footnote button when it is clicked/ tapped, which cuts out the annoying bouncing around the page that footnotes typically result in.

  • The active popovers will be resized and repositioned to ensure that they continue to be completely visible on-screen and aesthetically pleasing: this makes it perfect for mobile devices and responsive designs.

This project includes both the script itself and a default style to apply to the footnote button/ content that are eventually generated. There are also a variety of additional styles that illustrate some of the possibilities for styling these components.

The script has many configurable options from having popovers instantiated on hover, to allowing multiple active footnotes, to setting specific timeouts for popover creation/ deletion. It also returns an object that allows you to activate, remove, add breakpoints, and reposition popovers properly. All of these options and return functions are shown in detail at the script's project page. You can also see a demo of the project in action on the same page.

Requires jQuery 1.7+ at a minimum (for .on()) and jQuery 1.8+ for full functionality (1.8 automatically prefixes the transform/ transition properties).

Note: Bigfoot is currently incompatible with jQuery 3.0+ (see #54)

Questions? Issues? Feature requests? Check out the Github page for this project.




  • 1

    Can't compile bigfoot-number.scss

    CodeKit 2 is returning the following error:

    Compass was unable to compile one or more files in the project:

    error style.scss (Line 40 of _bigfoot-number.scss: List index is 2 but list is only 1 item long for `nth')
  • 2

    Popover positioning is broken on Mobile Safari when zoomed-in

    Steps to reproduce:

    1. Load any bigfoot.js enabled page (marco.org, blog.jaredsinclair.com, etc.) on an iOS device running Mobile Safari. Try an iPad in particular.
    2. Pinch open to zoom in to an area of text containing a footnote button.
    3. Tap the button.
    4. The popover is off by an unpredictable amount of horizontal pixels.

    This bug does not occur on desktop Safari.

  • 3

    Demo styles look broken

    Looking at http://bigfootjs.com in mobile Safari it looks like the popup styles are broken. On the homepage and on the demo page the popup displays as a slim stroke, cutting off the text inside. a screenshot of the issue

  • 4

    Added a substitution for single quotes in the footnote content.

    Footnote content that contained a single quote character was being truncated at the quote. This replaces the single quote with an ' when the double quote and less than/greater than signs are replaced.

  • 5

    Fix to avoid error when bigfoot.js is compressed/minified

    Hi @lemonmade here is a fix to avoid error when unminified version of the script is minified with an external tool :


    footnoteButtonSearchQuery = settings.scope ? "" + settings.scope + " a[href*=\"#\"]" : "a[href*=\"#\"]";

    should be replaced with :

    footnoteButtonSearchQuery = settings.scope ? '' + settings.scope + ' a[href*="#"]' : 'a[href*="#"]';

    (like it's done in min version of the script)

  • 6

    Scrollable footnotes don't scroll in Safari on Yosemite

    Longer footnotes don't always scroll in Safari 8.0 on Yosemite. They're fine on Chrome and Firefox. As soon as I open the Safari Inspector, it scrolls. Refresh the page and the issue is back...

  • 7

    add settings allowing use of different markup

    With these new settings users will be able to use this great script with other html markup.

    The new settings names may not be ideal, feel free to adapt/rename it :)

    Any thoughts about this ?

  • 8

    Unable to see tooltip pointing to the footnote button

    When I set up bigfoot.js on my project, the popover shows up correctly (as a rounded rectangle), but I do not see the little "arrow" on the popover.

    Is there a setting that controls this?

  • 9

    Incorrect footnote behavior on Jekyll/Octopress index pages

    This is something between a bug and a feature request. A common element of many Jekyll/Octopress style blogs is an index page that has excerpts from the last X blog posts. Now if there are any footnotes in within those excerpts that Bigfoot starts to run into trouble (for obvious reasons), because the footnote will both be incorrectly labeled and will be display the incorrect text.

    That is, if we have the following excerpt

    Lorem ipsum dolor sit amet, in nulla causae aliquam usu, assum augue sit ex. Veritus electram ut vim, nobis oratio inimicus nec an, docendi repudiandae et nec. Ut eos convenire rationibus, eu eam elit commune intellegat. Tritani mediocritatem no eam. Te legere nusquam nam.[^1]

    [^1]: Vel tale democritum ex

    And then the following:

    Sint hinc mel ad, mei et tritani necessitatibus, vel magna dolorum patrioque te. In eos fabulas fuisset suavitate. Dolorem complectitur te eos, mel error possit minimum no. Cu justo saperet mea, vim virtute percipit cu. Nisl enim salutandi ei nam, ne qui facer lobortis scripserit, ius ad erat labitur convenire.[^1]

    [^1]: Mutat aliquam contentiones mel

    The second footnote will be labeled as 2 instead of 1 and will display Vel tale democritum ex instead of Mutat aliquam contentiones mel

    I am unaware of the inner workings of Bigfoot.js, but would it be possible to scan until you hit a footnote section instead of scanning through the whole page? Thank you for the wonderful project. My blog and I are very grateful

  • 10

    website unavailable

    the README's project page and demo links redirect to http://www.bigfootjs.com, but that address is currently unavailable

    aside: it'd be nice if this repo's header included a link to that site

  • 11

    Can't scroll popover until window is resized in Safari on El Capitan

    Popovers with overflow content will not scroll until the window is resized in Safari (only on El Capitan – it works fine in Chrome on El Capitan, and in Safari on Yosemite).

    It's reproducible on the demo page (use the footnote button under "Usage" for example). Just open the page, then click the footnote to open the popover. 2-finger scrolling the popover should fail. Resize the window with the popover still visible, and 2 finger scrolling the popover should now work.

    Note that closing and reopening the popover requires the window again be resized for scrolling to work.

    Example movie showing the problem here: http://cl.ly/dRBS

  • 12

    Using 'footnote' or 'footnotes' as a tag

    Hi, I understand that Bigfoot is not being maintained, but I've been using it on a few Squarespace sites for a number of years now and discovered a frustrating and interesting bug/error.

    Someone contacted me to ask how I implemented Bigfoot.js on my site and I decided to write up a walkthrough. I previewed it many times, but once I finally published the post, Bigfoot stopped working. I checked that it was still working fine on other pages and posts and spent some time trying to fix the issue by creating a new post, checking, and again discovering it wasn't working. It turns out that I was adding tags as the final step before making the post public. I narrowed it down to using 'footnote' or 'footnotes' as tags. (It was a post about adding footnotes, after all.) By removing these tags, Bigfoot again worked as expected.

    I'm more curious than anything whether this is a known issue (or perhaps a feature?) and/or why it may be happening (I'm still quite new to JavaScript).

  • 13

    [Accessibility] Broken keyboard navigation on demo page

    Navigating by tab on the demo page, I get directed to:

    1. The first "..." (good)
    2. download (good)
    3. github (good)
    4. demo (good)
    5. <a href="#project">, an element invisible on the screen (bad)

    More info on why this is important:

    1. https://accessibility.digital.gov/ux/tab-order/
    2. https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html

    This, along with #73 , makes it hard to evaluate whether the plugin is accessible.

  • 14

    [Accessibility] Focused element on demo page is barely visible

    More info on why this is important:

    1. https://a11yproject.com/posts/never-remove-css-outlines/
    2. https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F78
  • 15

    scroll issue - windows 10, chrome

    From a reader on our site:

    "When I scroll inside them, I get a few lines after what's initially visible, and then it jumps straight to the bottom, so I'm missing content in the middle. For reference, working on Windows 10 on a PC, with the site open in Chrome. All notes seem to be behaving the same way."

  • 16

    Question on implementing buttonMarkup

    Thanks for this awesome plugin. I just had a question about the documentation for buttonMarkup.

    I've been trying to get the numeric style like how it's rendered in the demo, so I was trying to set the buttonMarkup settings, but I can't understand how the value of {{SUP:attr}} is acquired and how I should define this in options.

    If this is my footnote: <sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>

    What value should I use for buttonMarkup below?

    var bigfoot = $.bigfoot( { deleteOnUnhover: true, preventPageScroll: false, hoverDelay: 250, activateOnHover: true, buttonMarkup: ? } );

    Thanks! The PayPal donation link also wasn't working btw. I owe you a coffee. :)