Getting started

Install the package, import the stylesheet once, then bind the tooltip to the element that holds your triggers.

Install

Floating tooltip ships in the interactions package with Moving highlight and Hold to confirm.

npm install @reuse-sh/interactions

Bind a toolbar

Give each trigger a data-reuse-tooltip with its hint. Icon buttons keep their own aria-label; the tooltip adds itself to aria-describedby while it is open.

import { createFloatingTooltip } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

// Any element inside the root with data-reuse-tooltip gets the hint.
// <button aria-label="Share" data-reuse-tooltip="Share">…</button>
const toolbar = document.querySelector(".toolbar");
const tooltip = createFloatingTooltip(toolbar, { tilt: 5 });

// Later, when the toolbar leaves the page
tooltip.destroy();

import { FloatingTooltipGroup } from "@reuse-sh/interactions/react";
import "@reuse-sh/interactions/styles.css";

export function Toolbar() {
  return (
    <FloatingTooltipGroup className="toolbar" tilt={5}>
      <button aria-label="Share" data-reuse-tooltip="Share"><ShareIcon /></button>
      <button aria-label="Delete" data-reuse-tooltip="Delete"><TrashIcon /></button>
    </FloatingTooltipGroup>
  );
}

Clean up

destroy() removes the popup and every listener. The React group does this when it unmounts.