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.

Browser support

Using the Popover feature. (Can I use...)

• Firefox 125+
• Safari 17.0+
• Chrome 116+
• Edge 116+

Demo

• Demo page

Examples

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

  footnoteReferencePopover(document.querySelectorAll('.js-footnote-reference-popover')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</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="Popover Close"
  data-popover-hide-image-src="./popover-close.svg"
  data-popover-hide-image-width="18"
  data-popover-hide-image-height="18"
  data-mouseenter-delay="1000"
  data-mouseleave-delay="1000"
  >[2]</a
>

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

* @w0s/shadow-append-css is no longer required since version 7.3

HTML attributes

Style customization

The popover markup looks like this.

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

<x-popover popover="" aria-label="Note" 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">
      <span part="hide-button-text" hidden="">Popover Close</span>
      <img part="hide-button-image" src="./popover-close.svg" alt="Popover Close" width="18" height="18" />
    </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(hide-button) {
    ...
  }
}