@spider-ui/tooltip NPM

`@spider-ui/tooltip`

Create an accessible tooltip on an any element. The tooltip will show on focus or hover.

Usage

To use the element, use the spider-tooltip tag, and pass in your slotted elements:

<spider-tooltip>
  <button slot="trigger">Learn More</button>
  <div slot="content">You've already learned too much.</div>
</spider-tooltip>

Install

@spider-ui/tooltip requires minimal set up with either npm or the distribution code.

npm

Install the package and its peer dependencies:

$ npm i @spider-ui/tooltip @spider-ui/global-event-registry upgraded-element

Then import the element in your JavaScript:

import "@spider-ui/tooltip"

Bundle

If you don't want to use npm, you can grab the source from jsdelivr CDN. Similar to npm, you'll need to add script links to @spider-ui/global-event-registry and upgraded-element before tooltip.

<!-- Use the unminified bundle in development -->
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@spider-ui/tooltip@0.2.7/dist/tooltip.js"
  integrity="sha256-0zfwh3NHZMAu+HbXEKttDolp/L+odlcPs2Z5CNCbK0o="
  crossorigin="anonymous"
></script>

<!-- Or use the minified/uglified bundle in production -->
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@spider-ui/tooltip@0.2.7/dist/tooltip.min.js"
  integrity="sha256-tV1z5exT+o2BkfsYdhUInd8bzkVghuuYaRK/7iqqwaY="
  crossorigin="anonymous"
></script>

Then you're good to go!

Controlling Visibility

Because slotted elements aren't hidden in the DOM on first render, you may see your tooltip's unstyled content on page load. You can fix around this by adding the following to your app's stylesheet:

spider-tooltip:not(:defined) {
  display: none;
}

Unfortunately, however, this won't work in IE 11.

Attributes

`position`

Configures which side of the trigger to show the tooltip.Default: "block-start"Accepted Values: "block-start" | "block-end" | "inline-start" | "inline-end"

<spider-tooltip position="inline-end">...</spider-tooltip>

`show-arrow`

Configures the tooltip to show an arrow pointing to the trigger.

<spider-tooltip show-arrow>...</spider-tooltip>

`mode`

Configures the base visual theme of the tooltip.Default: "dark".Accepted Values: "dark" | "light".

<spider-tooltip mode="light">...</spider-tooltip>

`delay-on`

Configures a custom show delay duration (in milliseconds) for the tooltip.

<spider-tooltip delay-on="500">...</spider-tooltip>

`delay-off`

Configures a custom hide delay duration (in milliseconds) for the tooltip.

<spider-tooltip delay-off="500">...</spider-tooltip>

`delay`

Configures both the delay-on and delay-off delay durations of the tooltip. Use delay-on and delay-off to override the show and hide delay durations, respectively.Default: "300".

<spider-tooltip delay="500">...</spider-tooltip>

Slots

trigger

The trigger element for the tooltip. This can be any element, but it's recommended to be a focusable element (e.g., a button) for better accessibility.