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.

Dependencies

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.

Usage

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

<ol>
  <li id="fn:1">
    <p>
      Footnotes content 1.
    </p>
    <a href="#fnref:1" rev="footnote">↩</a>
  </li>
</ol>

$("[rel=footnote]").inlineFootnote({
  // 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.

Options

boxMargin: How much margin is left between the link and the footnote box and the edge of the browser and the footnote box. Defaults to 20 (px).
hideDelay: The delay before hiding the footnote box after user moves mouse out of the link or footnote box. Defaults to 200 (ms).
hideFromContent: Elements matching this selector are hidden when showing the footnote content inside the opened box. Defaults to "[rev=footnote]".
maximumBoxWidth: Maximum width of the footnote box. Defaults to 500 (px).
boxId: Id applied to the footnote box. Defaults to "footnote_box"

Development

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

Author

Vesa Vänskä ~ @vesan