Tooltip

About

The tooltip is the text of the data-tooltip attribute, or the content of an element named by data-tooltip-target when the text is empty. It appears above the control after a short delay under the pointer and at once on keyboard focus, and goes when the pointer leaves, focus moves, the control is pressed, or Escape is pressed. It is a description, not a name: a control with only an icon still needs its own aria-label. The control gets aria-describedby pointing at the tooltip while it is shown.

The tooltip sits where data-tooltip-placement says and flips to the opposite side when there is no room, staying inside the viewport; the triangle keeps pointing at the control. It fades and moves into place over the framework's transition, and appears at once for a visitor who prefers reduced motion. Touch gets nothing: a tooltip under a finger has nowhere to be, so a control that needs its description on a phone should say it in its label.

Usage

Register the component and the framework loads it the first time a page contains [data-tooltip].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-tooltip]', () => import('@parallelogram-js/core/components/Tooltip'));
app.run();

The framework is optional. Tooltip.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Tooltip from '@parallelogram-js/core/components/Tooltip';

Tooltip.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/tooltip.css';