Footnote reference popover
npm install @w0s/footnote-reference-popover
- 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 and 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.
Using the Popover feature. (Can I use...)
- Firefox 125+
- Safari 17.0+
- Chrome 116+
- Edge 116+
``html
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]>
code emphasis\*
is no longer required since version 7.3HTML attributes
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'.
Style customization
The popover markup looks like this.
`html
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]>
#shadow-root (open)
...
` CSS pseudo-element.`css
.my-popover {
&::part(content) {
...
} &::part(hide-button) {
...
}
}
``