A repository of over 1000 quality jQuery plugins

jQuery jQuery Inline Footnotes

jQuery Inline Footnotes is a jQuery Hover plugin.

Created by Vesan

Allows footnotes to be viewed inline by hovering them

Not what you're looking for? Click here to view more Hover jQuery plugins

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



You might also like these other Hover jQuery Plugins

  • JQuery TouchMenuHover

    Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7 etc

  • JQuery GreyScale Plugin

    A plugin for jQuery convert images to grayscale on the fly and reveal the coloured version on hover

  • JQuery Tooltip Plugin

    A simple hover tooltip

License:

Copyright (c) 2011 Vesa Vänskä