@w0s/footnote-reference-popover
v6.0.0
Published
Footnote reference popover
Downloads
20
Readme
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.
- Markup such as
- 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
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) {
...
}
}