COMPONENT: Tooltip Component

[nayan458]

Task: Tooltip Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface TooltipProps {
  content:    string;
  children:   ReactNode;         // the trigger element
  position?:  'top' | 'bottom' | 'left' | 'right';
  delay?:     number;            // ms before showing, default 400
  className?: string;
}

Variants / States

State	Description
Hidden	Default — tooltip not in DOM
Visible	Appears after delay ms on hover/focus
top / bottom / left / right	Arrow and position adapts to placement

Acceptance Criteria

• Rendered via createPortal — never clipped by overflow: hidden parents
• Appears on both hover and focus — keyboard users get tooltips too
• delay prevents tooltip flash on quick mouse passes
• Arrow indicator points from tooltip body to trigger element
• Disappears immediately on mouse-leave and blur
• Zero hardcoded hex values
• Storybook stories: all 4 positions, long content, on an icon button

Notes

• Used on AI confidence score bar (shows exact score on hover), action buttons (shows consequence description), and theme picker icons
• Keep tooltip content to plain strings only — no ReactNode content (use Popover for rich content, build that in a later milestone)