Create Pop-up Footnotes With The Endnotes Library

Endnotes is an ultra-lightweight, dependency-free JavaScript library for creating user-friendly popup footnotes.

The library can intelligently place popups, ensuring optimal positioning for the best user experience. It also provides “before” and “after” hooks which allows developers to perform actions or modifications right before the popup is displayed or after it is closed.

How to use it:

1. Download and import the Endnotes as a module.

import footnotes from './endnotes.js'

2. Create footnotes as follows:

• The anchor element (<a>) should reference the location of the <aside> element that contains the popup’s text.
• The <aside> element contains the popup’s text and must have a unique ID.

<a class="footnote" style="vertical-align: super;" href="#ref-1">
  1
</a>
<aside id="ref-1">
  Content Here
</aside>

3. Initialize the footnotes.

footnotes('a.footnote')

4. Apply styles to the popup.

#footnotes_dialog_12c1b560_content {
  /* your styles here */
}

5. Available options & callbacks.

footnotes('a.footnote',{
  width: () => window.innerWidth - 300 < 100 ? window.innerWidth - 60 : 300,
  height: 150,
  ref: href => {
    let hash = new URL(href).hash
    let ref = document.querySelector(hash)
    return ref?.innerHTML || 'invalid ref'
  },
  before_hook: null,
  after_hook: null
})