Skip to content
Pinky UI

overlays

Tooltip

A short, non-interactive label appears near a control on hover or focus, and nowhere else.

  • overlays
  • tooltip
  • label
  • hover
Related pattern

Label only, hover/focus only; Adaptive Popover is the interactive contextual surface.

Live preview

Quick usage

usage
import { Tooltip } from "@pinky-ui/systems";

<Tooltip content="Copy to clipboard">
  <button>Copy</button>
</Tooltip>

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
contentReactNode—The short label shown near the trigger.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Position is measured only on open, not continuously.
  • Nothing mounts until the trigger is hovered or focused past the delay.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • A short label that clarifies an icon-only or ambiguous control

When not to use

  • Interactive content, actions or anything a touch user must reach — use Adaptive Popover

Skill

Purpose

A short, non-interactive label for a control — nothing more. Use it to clarify an icon-only button or an ambiguous action, and nothing that needs its own actions or focus.

Interaction anatomy

  • A single trigger element owns the tooltip via aria-describedby.
  • Opens on hover after a short delay, and immediately on focus.
  • Closes on blur, mouse leave, or the trigger unmounting.
  • Position is measured once on open and clamped to the viewport; it does not track continuously.

Good for

  • Clarifying an icon-only button, a truncated label, or an abbreviation
  • Supplementary context that is genuinely optional to read

Avoid for

  • Anything interactive — links, buttons, forms — inside the bubble; that's [[adaptive-popover]]
  • Content a touch user must be able to reach; hover has no touch equivalent, so nothing essential can live only in a tooltip
  • Long explanations; if it needs more than a line, it needs a popover

Usage

tsx
<Tooltip content="Copy to clipboard">
  <button aria-label="Copy">
    <CopyIcon />
  </button>
</Tooltip>

Accessibility

  • role="tooltip" and aria-describedby connect the label to its trigger the standard way — no custom ARIA pattern to learn.
  • Keyboard focus opens it exactly like hover does; there is no keyboard-only path that misses it.
  • Because it's non-interactive, nothing essential should ever live only inside a tooltip.

Performance

Position is measured once per open, not on every frame or scroll event — there's no ResizeObserver or continuous tracking loop running while it's visible.

Composes with

Magnetic Button and other icon-only controls, where the label clarifies an action without adding visible chrome. Reach for Adaptive Popover the moment the bubble needs to do more than label something.

Open this skill on its own page