Skip to content

feat(react): add Tooltip and TooltipProvider components#52

Draft
Poafs1 wants to merge 1 commit intomainfrom
feat/tooltip-component
Draft

feat(react): add Tooltip and TooltipProvider components#52
Poafs1 wants to merge 1 commit intomainfrom
feat/tooltip-component

Conversation

@Poafs1
Copy link
Contributor

@Poafs1 Poafs1 commented Feb 25, 2026

Summary

  • Adds a comprehensive, headless Tooltip component powered by @floating-ui/react
  • Adds TooltipProvider for skip-delay grouping across multiple tooltips
  • Props-driven flat API consistent with Select, Combobox, and other existing components

Features

  • 12 placements with collision-aware flip/shift
  • Controlled and uncontrolled modes (open/onOpenChange/defaultOpen)
  • Configurable open/close delays (700ms/300ms defaults)
  • WCAG 2.1 hoverable content via safePolygon()
  • Keyboard: opens on focus, closes on Escape
  • Optional pointing arrow via FloatingArrow
  • Follow cursor mode (true, "x", "y")
  • Portal rendering (on by default)
  • CSS exit animations via data-state + useExitTransition
  • --ck-tooltip-transform-origin CSS custom property for scale animations
  • forceMount for animation library integration
  • describeChild toggle (aria-label vs aria-describedby)
  • Skip-delay grouping via <TooltipProvider>

Usage

<Tooltip content="Save document" placement="top" showArrow>
  <button>Save</button>
</Tooltip>
<TooltipProvider>
  <Tooltip content="Bold"><button>B</button></Tooltip>
  <Tooltip content="Italic"><button>I</button></Tooltip>
</TooltipProvider>

Test plan

  • 36 unit tests covering rendering, interactions, accessibility, and edge cases
  • All 1414 existing tests continue to pass (no regressions)
  • Build passes (ESM + DTS)
  • Lint clean (0 errors)
  • Manual test in example app

🤖 Generated with Claude Code

Headless, accessible Tooltip powered by @floating-ui/react with:
- Props-driven flat API (content, placement, showArrow, etc.)
- 12 placements with collision-aware flip/shift
- Controlled and uncontrolled modes
- WCAG 2.1 hoverable content via safePolygon
- Keyboard support (focus open, Escape close)
- Optional arrow, follow-cursor, portal rendering
- Skip-delay grouping via TooltipProvider
- CSS exit animations via data-state + useExitTransition
- --ck-tooltip-transform-origin CSS custom property
- forceMount for animation library integration
- 36 tests covering rendering, interactions, a11y, and edge cases

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Feb 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
packages-app Ready Ready Preview, Comment Feb 25, 2026 11:31am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant