Allows footnotes to be viewed inline by hovering them
JavaScript CoffeeScript Ruby
Latest commit ca0c73d Mar 5, 2013 @vesan Bumps the version to 1.0.3
Failed to load latest commit information.
compiled Bumps the version to 1.0.3 Mar 5, 2013
examples
lib/jasmine-1.0.2 Adds boilerplate stuff Jul 25, 2011
spec
src
.gitignore
Gemfile Adds coffee-script and rake to Gemfile Oct 7, 2012
Gemfile.lock Adds coffee-script and rake to Gemfile Oct 7, 2012
LICENSE Adds boilerplate stuff Jul 25, 2011
README.md Fixes typo in README Feb 27, 2013
Rakefile Bumps the version to 1.0.3 Mar 5, 2013
SpecRunner.html Adds support for hiding deeply nested back links Feb 27, 2013
screenshot.png Adds demo page link, screenshot and supported browsers Jul 28, 2011

README.md

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

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