Tooltip

molecules

Hover/focus popover with 200ms delay. Renders as <span role='tooltip'> with aria-describedby on the trigger.

ARIA Role: tooltip

Demo

Helpful tooltip text

Bottom tooltip

Props

Prop	Type	Required	Default	Description
`content`	`React.ReactNode`	Yes	`—`
`children`	`React.ReactElement`	Yes	`—`	Single trigger element

TypeScript Interface

interface TooltipProps {
  content: React.ReactNode;
  children: React.ReactElement;
  placement?: 'top' | 'right' | 'bottom' | 'left';
  delay?: number;
}

Assertions (NASA Rule 5)

[type]children must be exactly one element (NASA Rule 9 — composition over drilling)(NASA Rule 9)
[aria]Trigger must get aria-describedby pointing to tooltip id(WCAG 1.3.1)

Usage

Import

import { Tooltip } from '@epasslive/design-system'

Basic

<Tooltip />

With Variants

<Tooltip variant="primary" size="md" />