Footnote reference popover

Features

• The overall behavior is similar to Wikipedia footnotes.
• Automatically copies the HTML of footnotes on the page and displays them as popovers.
  • Markup such as <a href> and <code> can be used in popovers.
  • However, id attributes inside footnote are removed. This is to prevent duplicate IDs from existing in the document.
• A popover is displayed on hovering or clicking the trigger element.
  • The popover is generated the first time a request is made to display the popover, not when the web page loads. This minimizes DOM processing at load time when a large number of popovers are embedded in the page.
• Customizable delay time for showing and hiding for mouse operations.

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/footnote-reference-popover": "...",
      "@w0s/shadow-append-css": "..."
    }
  }
</script>
<script type="module">
  import FootnoteReferencePopover from '@w0s/footnote-reference-popover';

  for (const targetElement of document.querySelectorAll('.js-footnote-reference-popover')) {
    new FootnoteReferencePopover(targetElement);
  }
</script>

<a class="js-footnote-reference-popover"
  href="#footnote-1"
>[1]</a>

<a class="js-footnote-reference-popover"
  href="#footnote-2"
  data-popover-label="Note"
  data-popover-class="my-popover"
  data-popover-hide-text="Close"
  data-popover-hide-image-src="/assets/popover-close.svg"
  data-popover-hide-image-width="16"
  data-popover-hide-image-height="16"
  data-mouseenter-delay="250"
  data-mouseleave-delay="250"
>[1]</a>

<ul class="footnotes">
<li id="footnote-1">Footnote text. <a href="#">link</a> <code>code</code> <em>emphasis</em></li>
<li id="footnote-2">Footnote text.</li>
</ul>

Attributes

Style customization

The popover markup looks like this.

<a class="js-footnote-reference-popover" href="#footnote" data-popover-class="my-popover">[1]</a>

<x-popover popover="" class="my-popover">
  #shadow-root (open)
  <span id="first-focusable" tabindex="0"></span>

  <div tabindex="-1" part="content">
    <slot>...</slot>

    <button type="button" popovertarget="" popovertargetaction="hide" part="hide-button">Close</button>
  </div>

  <span id="last-focusable" tabindex="0"></span>
</x-popover>

Therefore, you can customize the style using ::part CSS pseudo-element.

.my-popover::part(content) {
  &::part(content) {
    ...
  }

  &::part(hide-button) {
    ...
  }
}