jQuery Inline Footnotes

Allows users to hover footnotes to view the footnote content inline. Implemented as a jQuery plugin.

Works out of the box with Markdown style footnotes that many intrepreters implement (for example Maruku and PHP Markdown Extra).

Screenshot can be seen below and you can test the demo page yourself. GitHub has the code.

Download the minified plugin code.

Screenshot of jQuery Inline Footnotes in action


jQuery. Tested with 1.6.2 but probably works with older versions too.

Supported Browsers

Supports all the browsers jQuery supports namely Internet Explorer 6.0+, Mozilla Firefox 2.0+, Safari 3.0+, Opera 9.0+, and Google Chrome.


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

  <li id="fn:1">
      Footnotes content 1.
    <a href="#fnref:1" rev="footnote"></a>
  // possible options

The selector given to $ is the selector for the links. The content to be shown is found by finding an element with id that matches the links href in this case fn:1. If the matching content has elements with attribute rev with value footnote, those will be hidden (can be changed with hideFromContent option.

Styling is done with CSS.



jQuery Inline Footnotes is written with Coffee-Script. Tests are written with Jasmine. Open SpecRunner.html to run the tests.


Vesa Vänskä ~ @vesan