https://github.com/gromnitsky/endnotes

A tiny, vanilla JavaScript popup footnotes library
https://github.com/gromnitsky/endnotes

Last synced: about 6 hours ago
JSON representation

A tiny, vanilla JavaScript popup footnotes library

• Host: GitHub
• URL: https://github.com/gromnitsky/endnotes
• Owner: gromnitsky
• Created: 2022-10-31T11:20:17.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-24T17:28:30.000Z (over 1 year ago)
• Last Synced: 2024-11-08T13:53:07.150Z (11 days ago)
• Language: HTML
• Size: 129 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# endnotes

A tiny, vanilla JavaScript popup footnotes library.

* 0 dependencies

* 'Intelligent' popup placing

* before/after hooks

* ~4KB unminified and < 1 KB minified+gzipped

Demo: https://gromnitsky.users.sourceforge.net/js/examples/endnotes/example.html

![](example.png)

## Usage

    $ npm i endnotes

html:

~~~



  this requires an explanation 1





  hello



~~~


js:

~~~

  import footnotes from './endnotes.js'

  footnotes('a.footnote')

~~~

This adds event listeners to everything that matches `a.footnote`

selector. When a user hovers over a link, it extracts inner html from

the place to which the link's href points & displays a popup.

The latter implies a local source of data, but you can provide your own

function for the data extraction:

    footnotes('a.footnote', {ref: myfunc})

`myfunc` will get 1 argument: a value of `href` attribute of an

hovered element.

Other possible options:

* `width` & `height` for the popup window;

* `before_hook` & `after_hook` functions; both get target element as

  an argument.

## Styling

The content of a footnote goes into

`#footnotes_dialog_12c1b560_content` div.

Some its properties (like `background` & `color`) are inlined by the

library, thus have the highest specificity. You'll need to use

`!important` flag to override such values:

~~~

#footnotes_dialog_12c1b560_content {

  background: floralwhite !important;

}

~~~

## License

MIT