Primitive Adaptersregistry/ui/tooltip.tsx/r/tooltip.json

Tooltip

Keyboard- and hover-accessible ink-framed tooltip adapter with hard offset shadow.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Dark · Flashback.f12-theme-dark

Interactive preview

Install & copy-in source

shadcn CLI (tooltip.json)

npx shadcn@latest add https://frame12.dev/r/tooltip.json

Usage example (Tooltip)

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Button } from '@/components/frame12';

export function HoldoutHint() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild><Button variant="secondary" size="sm">Holdout spec</Button></TooltipTrigger>
        <TooltipContent>10% randomized checkout holdout cohort</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Opens on both pointer enter and keyboard focus, and dismisses immediately on Escape.
Links trigger to role="tooltip" content via aria-describedby when open.

GrammarFRAME/12 rules

Design grammar

Framed with a 2px solid --f-rule border and 3px 3px 0 var(--f-rule) offset shadow.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/tooltip.tsx)
Prop	Type	Default	Description
`TooltipTrigger`	`{ asChild?: boolean; children: React.ReactElement }`	`required`	Trigger element that opens the tooltip on hover or keyboard focus.
`TooltipContent`	`React.HTMLAttributes<HTMLDivElement>`	`required`	Tooltip surface linked to the trigger via aria-describedby.