Tooltip · 0nlyType

Usage

This example also uses Button.

npx shadcn@latest add https://thedirectors.agency/ui/r/button.json

tooltip-example.tsx

import { Button } from "@/components/ui/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"export default function Example() {return (<div className="grid justify-items-start gap-x-10 gap-y-12 sm:grid-cols-3"><div className="grid justify-items-start gap-14"><span className="ot-label">whisper</span><Tooltip><TooltipTrigger asChild><Button variant="bracket">Duplicate</Button></TooltipTrigger><TooltipContent>Makes a copy beside it</TooltipContent></Tooltip></div><div className="grid justify-items-start gap-14"><span className="ot-label">initials</span><div className="flex items-center gap-8"><Tooltip><TooltipTrigger asChild><kbd className="ot-kbd" tabIndex={0}>G</kbd></TooltipTrigger><TooltipContent variant="initials">Lays the <b>g</b>rid over the page</TooltipContent></Tooltip><Tooltip><TooltipTrigger asChild><abbr className="ot-label" tabIndex={0}>CMYK</abbr></TooltipTrigger><TooltipContent variant="initials"><b>C</b>yan, <b>m</b>agenta, <b>y</b>ellow, <b>k</b>ey</TooltipContent></Tooltip></div></div><div className="grid justify-items-start gap-14"><span className="ot-label">beside</span><Tooltip><TooltipTrigger asChild><Button variant="quiet">Archive</Button></TooltipTrigger><TooltipContent variant="beside">Kept, out of the way</TooltipContent></Tooltip></div></div>)}// Pinned: each whisper beside or above a copy of its control, with the attributes Radix would give it.

Contract

Underneath: Radix Tooltip.
Anatomy: <span class="ot-tip"> holding the control (with aria-describedby) and .ot-tip-text.
A whisper in parentheses above the thing it names. The parentheses are thin (200) and taller than the words, in ink, as 20(25) sets them round its figures, so the whisper reads as an aside held apart. It waits for a still pointer; focus shows it at once. Escape sets data-hush until the pointer or focus leaves.
Variants go on data-variant (TooltipContent variant): whisper (the default), initials, beside.
Initials, after "the uncreative" reversing part of its word: for a key or an abbreviation. The letters the control shows are marked with <b> in the whisper's words and reversed out of the ink (paper on ink), so the whisper shows where G, or CMYK, comes from. Screen readers hear the words whole.
Beside, after the small notes hung beside "It has to be design.": the whisper on the control's own line, after it, on a hairline that runs from the control, with no parentheses (the line holds it apart). It sits at the line's end: the right, or the left on a right-to-left page (read from the page as it opens; pass side on a mixed page). Whichever side Radix settles on, the line faces the control; flipped above or below, the line is dropped.
Reduced motion: the initials and the line are simply there. Forced colours: the line is drawn in CanvasText and the initials are reversed in Canvas on CanvasText.

Props

Props of Tooltip
Prop	Type	Default	What it does
`delayDuration`	`number`	`400`	How long a still pointer waits before the whisper. Focus shows it at once.
`TooltipContent variant`	`"whisper" \| "initials" \| "beside"`	`"whisper"`	whisper: a few words in thin, tall parentheses above the control. initials: the same, for a key or an abbreviation; wrap each letter the control shows in <b> and it is reversed out of the ink inside its word (Lays the <b>g</b>rid over the page). beside: the words on the control's own line, after it, on a hairline that runs from the control; at the right, or at the left on a right-to-left page.
`TooltipContent side / sideOffset`	`Radix`	`"top" / 8 (beside: the line's end / 10)`	Where it sits. Keep a whisper above unless there's no room; flipped above or below, beside drops its line.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Tooltip	20(25)	A whisper in thin, tall parentheses
Initials tooltip	"the uncreative"	The key's letters reversed out of ink in the words they come from
Beside tooltip	"It has to be design." notes	The whisper on the control's line, on a hairline from it

How it moves

How it moves
Component	Articulation	What moves
Tooltip	Wait	It appears only for a still pointer
Initials tooltip	Spiccato	The initials land, then the words are written in round them
Beside tooltip	Reach	The hairline draws out from the control; the words arrive at its end

Example

Install

Usage

Contract

Props

Craft

Where its move comes from

How it moves