jQuery Plugin For Creating Exceptional Footnotes - bigfoot

File Size: 70.9 KB
Views Total: 2268
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Creating Exceptional Footnotes - bigfoot

Bigfoot is a jQuery plugin that creates exceptional footnotes, inspired by Instapaper. Built for mobile devices and responsive designs. 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.

Basic Usage:

1. Include the latest version of jQuery library and jQuery bigfoot plugig on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bigfoot.js"></script>

2. Choose and include a theme CSS on the web page.

<link rel="stylesheet" href="styles/bigfoot/bigfoot.css">

3. The HTML.

<div class="footnotes"><ol>
    <li class="footnote" id="fn:1">
        <p>footnote.<a href="#fnref:1" title="return to article"> ↩</a><p>

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

4. Initialize the plugin.

<script type="text/javascript">

5. Options.

  • actionOriginalFN : "hide": "delete", "hide", or "ignore"
  • activateCallback : function() {}: Specifies a function to call on a footnote popover that is being instantiated (before it is added to the DOM). 
  • activateOnHover : false: Specifies whether or not the footnote content will be activated when the associated button is hovered over.
  • allowMultipleFN : false: Specifies whether or not multiple footnote popovers can be active simultaneously.
  • anchorPattern: /(fn|footnote|note)[:\-_\d]/gi
  • anchorParentTagname: 'sup'
  • breakpoints : {}: An object containing information about breakpoints specified for your set of popovers.
  • footnoteParentClass: 'footnote'
  • footnoteTagname: 'li'
  • deleteOnUnhover : false: Determines whether footnotes that were instantiated by hovering over the footnote button are removed once the footnote button/ footnote popover is un-hovered.
  • hoverDelay : 250: If deleteOnUnhover is true, this specifies the amount of time (in milliseconds) that must pass after the footnote button/ content is un-hovered before the footnote is removed.
  • maxWidthRelativeTo: undefined,
  • numberResetSelector : undefined: A string representing the selector at which you would like the numbering of footnotes to restart to 1. 
  • popoverDeleteDelay: 500: When the footnote content is being removed this option specifes how long after the active class is removed from the footnote before the element is actually removed from the DOM.
  • popoverCreateDelay: 100: Sets a delay between the activation of the footnote button and the activation of the actual footnote content.
  • positionContent : true: Specifies whether or not the footnote popovers (and the popover tooltip, if it is included in the markup) should be positioned by the script.
  • preventPageScroll : true: Determines whether or not, when scrolling past the end of a footnote whose content is taller than the vertical space available, the scroll event will propagate to the window itself.
  • scope: false: If any truthy value is provided, only the footnotes within the scope you define will be affected by the script. The scope should be a selector string, as you would typically use in jQuery. 
  • useFootnoteOnlyOnce: true

Change logs:

2.1.4 (2016-02-12)

  • Adds a substitution for single quotes in original footnote contents.

2.1.3 (2015-06-03)

  • Removed escaped double quotes from double quoted strings to help minifiers not freak out.

2.1.2 (2015-04-05)

  • Fixed a bug with scroll calculation in IE 11
  • Made the button variables !default so that they are more easy to customize 
  • Added the dist folder back — I want people to be able to grab them if needed, and they need to be in for Bower.


  • Added new options. anchorPattern, anchorParentTagname, footnoteTagname and footnoteParentClass allow Bigfoot to work with a wider range of potential HTML structures (thanks to brunob for the original implementation).
  • Did some minor style changes to help me to maintain the code better.


  • Rewrote the script with Coffeescript and cleaned up a lot of cruft that had formed.
  • Rewrote the markup for footnotes and popovers with a BEM-style syntax.
  • Major re-work of the framework for creating styles, hopefully leading to more maintainable stylesheets in the future.
  • Got rid of the more theme-ey footnote/ markup files in exchage for the three basics: ellipse button/ tooltip popover, number button/ tooltip popover, and ellipse button/ bottom-fixed popover.


  • Fixed line height issues on the standard themes.


  • Added a second argument ($button) to the activateCallback setting to allow users to access the footnote button (most notably, the footnote's data attributes) in their callbacks.


  • Fixed an issue with text-indent ruining popover positioning.


  • Removed the positionNextToBlock option that allowed you to set where the popover would be appended to. Since the popovers now use absolute positioning, the popover element will always be appended to the .footnote-container element that also holds the button. Removed appendPopoversTo property for the same reasons.
  • Added the maxWidthRelativeTo option. Because the popovers now use absolute positioning relative to the container of the footnote button, max-width declarations with percentages will not yield the result they used to (when popovers could be appended to any element). By default, max-width declarations in set in percentages will be sized by the script relative to the viewport. If you specify an element or selector for maxWidthRelativeTo, that element's width will instead be used to size the popover (unless the viewport is smaller than the specified element, in which case the viewport will still be used to prevent any part of the footnote from going off-screen). For example, if you specify .main-content for the maxWidthRelativeTo property, the script will measure this element's width, take the smaller of it and the viewport's width (window.innerWidth), and multiply the percentage value from your CSS times the result to calculate the max-width of the popover. A bit convoluted, but necessary to allow for better performance and to prevent issues where fixed positioning can't be used (i.e., zoomed in on mobile browsers).
  • Updated popover styles to support the new positioning/ sizing algorythm.


  • Fixed an ID counting issue that prevented bigfoot.js from running on a page multiple times

This awesome jQuery plugin is developed by lemonmade. For more Advanced Usages, please check the demo page or visit the official website.