Easy jQuery Footnote/Sidenote Plugin - explainys.js

File Size: 13.6 KB
Views Total: 1264
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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-explain="Content goes here">
      ... Text ...

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

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

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


5. Default settings.


// 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.&#9786;",

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.