Scale — Tooltip

Install

Examples

Placement

Hover or focus a trigger. placement is top (default), bottom, left, or right.

Top

Bottom

Left

Right

Triggers

Works on any focusable trigger. trigger="click" toggles on click instead of hover.

Hover or focus

tokens

Click me

Options

without-arrow hides the arrow; disabled keeps the tip from ever opening.

No arrow

Disabled tooltip

Guidelines

Usage

short, text-only hints for an icon or control. Keep content text-only — never put interactive elements inside. The tip is position:fixed so it escapes overflow:hidden ancestors and flips on collision.

Do

Keep content to a short, plain-text phrase — a label or one-line hint.
Put tooltips on focusable triggers so keyboard users get them too.
Use one to name an icon-only control (e.g. a Button Icon).

Don’t

Don’t put links, buttons, or form fields inside — the tip is not part of the focus order.
Don’t hide essential information in a tooltip; it must be discoverable without one.
Don’t tooltip disabled elements — they don’t receive hover or focus.

Accessibility

Role: the tip carries role="tooltip" and a unique id; the first focusable slotted trigger gets aria-describedby pointing at it, so screen readers announce the hint with the trigger.
Keyboard: shows on keyboard focus as well as pointer hover; Esc dismisses while open.
Content: text-only — interactive elements inside are unreachable since the tip never takes focus.
Pointer: the tip is pointer-events:none, so it never steals hover from the trigger.

Properties

Button Icon — icon-only controls that often need a tooltip name.
Help Text — persistent guidance under form fields.
Menu — for interactive floating content.

Tooltip