@saekitominaga/customelements-tooltip-trigger NPM

Tooltip UI

Features

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

Demo

Demo page

Examples

<!-- ↓ The following element are automatically inserted from JavaScript in `<head>` when the page loads -->
<link rel="preload" as="image" href="/assets/tooltip-close.svg">

<a is="x-tooltip-trigger"
  href="#footnote-1"
>[1]</a>

<a is="x-tooltip-trigger"
  href="#footnote-2"
  data-tooltip-label="Note"
  data-tooltip-class="mytooltip"
  data-tooltip-close-text="Close"
  data-tooltip-close-image-src="/assets/tooltip-close.svg"
  data-tooltip-mouseenter-delay="250"
  data-tooltip-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>

<!-- ↓ The following element are automatically inserted from JavaScript just before `</body>` when the first request to display the tooltip is made -->
<x-tooltip>...</x-tooltip>