• 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 page

<script type="importmap">
  {
    "imports": {
      "@w0s/footnote-reference-popover": "..."
    }
  }
</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>

href [required]

URL hash value of the element that contains the content to be displayed in the popover. (e.g. #footnote-1 )

data-popover-label [optional]

Label to be set on popover (aria-label attribute value).

data-popover-class [optional]

Set the class name (class attribute value) on the popover element. It is mainly used to customize the appearance with CSS.

data-popover-hide-text [optional]

The text of the close button in the popover. If omitted, the default value is 'Close'.

data-popover-hide-image-src [optional]

The address of the image resource for the close button in the popover.

data-popover-hide-image-width [optional]

The width of the image resource for the close button in the popover.

data-popover-hide-image-height [optional]

The height of the image resource for the close button in the popover.

data-mouseenter-delay [optional]

Delay time between mouse cursor moved within the trigger element and showing the popover (milliseconds). If omitted, the default value is '250'.

data-mouseleave-delay [optional]

Delay time between mouse cursor moved out of the trigger element or popover and closing the popover (milliseconds). If omitted, the default value is '250'.

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) {
    ...
  }
}