@saekitominaga/customelements-tooltip-trigger

A custom element that triggers to call the tooltip UI.


Keywords
web-components, custom-elements, tooltip
License
MIT
Install
npm install @saekitominaga/customelements-tooltip-trigger@1.2.2

Documentation

A custom element that triggers to call the tooltip UI

npm version

A custom element that triggers to call the tooltip UI.

* The tooltip representation uses @saekitominaga/customelements-tooltip.

Demo

Examples

<a is="x-tooltip-trigger"
  href="#annotation-1"
  data-tooltip-element="x-tooltip"
  data-tooltip-close-text="Close"
  data-tooltip-close-src="/assets/tooltip-close.svg"
>[1]</a>
<ul class="annotation">
<li id="fn-1">The text written in this part is displayed as a tooltip. It also recognizes markup such as <a href="#">anchor links</a>.</li>
</ul>

<!-- ↓ The following element are automatically inserted from JavaScript just before </body> -->
<x-tooltip></x-tooltip>

Attributes

href [required]
URL hash value of the element that contains the content to be displayed in the tooltip. (e.g. "#annotation-1" )
data-tooltip-element [optional]
The text of the close button in the tooltip (Image alternative text).
data-tooltip-close-text [optional]
The text of the close button in the tooltip (Image alternative text).
data-tooltip-close-src [optional]
The address of the image resource for the close button in the tooltip.