Easy jQuery Footnote/Sidenote Plugin - explainys.js

explainys.js is a lightweight and easy-to-use jQuery plugin which allows you to create footnote/sidenote list from any inline elements with data-explain attribute.

See also:

• jQuery Plugin To Create Footnotes With Subscript Numbers - Footnoted
• jQuery Plugin For Creating Exceptional Footnotes - bigfoot
• Simple jQuery Animated Footnote/Endnote Plugin
• Minimal jQuery Auto Footnote Plugin - Footnote

How to use it:

1. Load jQuery library and the jQuery explainys.js plugin's files in the document.

<link href="path/to/explainys.js.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="path/to/explainys.js.js"></script>

2. Use data-title and data-explain attributes to create footnote/sidenote for your article.

<span class="explain" 
      data-title="Title" 
      data-explain="Content goes here">
      ... Text ...
</span>

3. Create an empty container to place your footnote/sidenote.

<div id="sidecontent">
  <!-- explainys goes in here -->
</div>

4. Call the function to initialize the plugin with default options.

$('article').explainys();

5. Default settings.

$('article').explainys({

// The class of the details element
detailsClass: 'explainys',

// Class of the span in text
spanClass: ".explain",

// Where to position the details
targetDiv: "#sidecontent",

//Default snippet when text is missing
textFail: "Opps!!! Someone forgot to write the sidenote.☺",

divPosition: 0,
divNumbers: "explainys-number",
divOpen: "open",

});

---

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