One tooltip. It travels.

Every anchor on this page shares a single element. It glides to the next one and morphs its size and text on the way. Hover the keyboard, press Tab, or just start typing.

Tooltip elements in the page right now: 0 About 2.3 kB gzipped, zero dependencies

npm install @eburlak/tooltip

Markup is the whole API

Put the text in data-tooltip and create one Tooltip. Elements added later work too, and the open tooltip follows when the attribute changes - press Copy and watch.

<button data-tooltip="Copy link">Copy</button>
<button data-tooltip="Opens below"
        data-tooltip-placement="bottom">Below</button>

import { Tooltip } from '@eburlak/tooltip';

new Tooltip(); // every [data-tooltip], now and later

Restyle it while it is open

A theme is a plain object. configure() regenerates the styles, and an open tooltip animates into the new colors, radius and font instead of blinking.

Same in React

The attributes work in JSX as soon as the instance exists, and a re-render that changes the text updates the open tooltip. No provider, no portal, no wrapper component.

// tooltip.ts
export const tooltip = new Tooltip({ theme: { maxWidth: 240 } });

// CopyButton.tsx
<button data-tooltip={isCopied ? 'Copied!' : 'Copy'}>
  Copy
</button>