Components

Tooltip

A hover/focus-triggered overlay for supplementary context. Built on React Aria's TooltipTrigger for correct keyboard and hover-intent behaviour. Placements and demo sections are driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

top · no arrow · 300ms

Controls

Placement

Title

Description

Delay (ms)

Default

Wrap any focusable trigger - a button, an icon, a piece of text - in <Tooltip>.

Hover or focus the button

Placements

Four base placements. Each direction slides in from the opposite edge on enter.

Top / Right / Bottom / Left

With description

Add a description for a two-line tooltip - a bold title plus supporting detail.

Title + description

With arrow

Set arrow to point the tooltip back at its trigger.

arrow={true}

Icon trigger

Use TooltipTrigger to wrap a bare icon - this is exactly how the Input and Label components show their help/tooltip icons.

Help icon

Delay

Control how long a hover must be sustained before the tooltip opens with delay (default 300ms). closeDelay controls the hide delay (default 0ms).

delay=0 / delay=300 (default) / delay=1000

Disabled

Set isDisabled on the tooltip to suppress it entirely - useful when the tip only applies conditionally.

isDisabled={true}

API

Prop	Type	Default
`title`	`ReactNode`	`-`
`description`	`ReactNode`	`-`
`placement`	`"top" \| "right" \| "bottom" \| "left" \| …`	`"top"`
`arrow`	`boolean`	`false`
`delay`	`number (ms)`	`300`
`closeDelay`	`number (ms)`	`0`
`isDisabled`	`boolean`	`false`
`trigger`	`"focus" \| "hover"`	`-`

Token anatomy

The tooltip surface is always the dark, high-contrast solid - the one place in the system where the background inverts regardless of light/dark mode.

Part	Token	Value
Surface	`bg-primary-solid`	`gray-950 (#1A1715)`
Title text	`text-white`	`#ffffff`
Description text	`text-tooltip-supporting-text`	`gray-400 (#B5B2AF)`
Arrow fill	`fill-bg-primary-solid`	`gray-950 (#1A1715)`

Animation

Enter/exit uses tailwindcss-animate plus four Untitled UI custom variants - placement-top, placement-right, placement-bottom, placement-left - registered in globals.css. React Aria sets data-placement on the tooltip's overlay wrapper; the inner content slides in from the edge opposite its placement using the in-placement-* ancestor variant.

Usage

import { Tooltip } from "@/components/base/tooltip/tooltip";
import { Button } from "@/components/base/buttons/button";

<Tooltip title="Save changes">
  <Button size="sm" color="secondary">Hover me</Button>
</Tooltip>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.