@rc-component/tooltip

@rc-component/tooltip is the tooltip primitive from the react-component/Ant Design ecosystem, wrapping @rc-component/trigger to render a positioned popup relative to any child element. It handles the interaction layer — hover, focus, click, or fully controlled visibility — while delegating placement math, alignment, and motion to the shared trigger engine used across the rest of the react-component suite.

Instead of exposing raw CSS overrides, it surfaces semantic classNames and styles slots for the root, arrow, and container nodes, plus accessibility wiring through generated tooltip ids and aria-describedby attribution on the trigger element. It ships prebuilt Less/CSS themes rather than CSS-in-JS, making it straightforward to drop into any React app without extra styling infrastructure.

What You Get

• A Tooltip component that wraps any single child element and shows a positioned popup on hover, focus, click, or programmatic control
• Built-in placement presets (top, bottom, left, right and their variants) with custom alignment overrides via the align prop
• Semantic classNames/styles slots for the root, arrow, container, and unique-container nodes instead of opaque CSS class overrides
• Configurable show/hide delays (mouseEnterDelay, mouseLeaveDelay), popup motion, and an optional arrow with custom content
• Automatic accessibility wiring — a generated or supplied tooltip id is attached to the trigger via aria-describedby whenever the popup is open

Common Use Cases

• Adding hover/focus help text to form fields, icons, or truncated labels
• Building a design system’s tooltip primitive on top of a shared, battle-tested positioning engine
• Showing controlled tooltips driven by external state (validation errors, guided tours)
• Theming tooltips through semantic class/style slots instead of overriding library-generated CSS

Under The Hood

Architecture Tooltip.tsx is a thin composition layer over @rc-component/trigger’s Trigger component: it maps its own prop surface (mouseEnterDelay, align, motion, unique, etc.) almost one-to-one onto TriggerProps, handles arrow-config normalization via a useMemo, and wires aria-describedby onto the child through a render-prop (getChildren). Popup.tsx is a single presentational div with role="tooltip" that renders the overlay content. There is no internal state management or placement math in this package — visibility, alignment, and rendering timing are all delegated to @rc-component/trigger, so the package’s own surface area is intentionally small (three source files: index.tsx, Tooltip.tsx, Popup.tsx).

Tech Stack Written in TypeScript, built with father (react-component’s shared build tool) to emit both CJS (lib/) and ESM (es/) output, with a dumi-powered docs/demo site. Runtime dependencies are @rc-component/trigger (positioning/visibility engine), @rc-component/util (the useId hook), and clsx for conditional class composition; react/react-dom are peer dependencies (>=18). Styling ships as prebuilt Less/CSS theme files (bootstrap.less, bootstrap_white.less) rather than CSS-in-JS. Linting uses a flat eslint.config.mjs with typescript-eslint and eslint-plugin-react/react-hooks; Prettier plus Husky/lint-staged enforce formatting pre-commit; CI runs on GitHub Actions with an additional CodeQL security scan and Codecov coverage reporting.

Code Quality Tests live under tests/ using rc-test (the react-component ecosystem’s Jest-based runner) with @testing-library/react, /dom, and /jest-dom. index.test.tsx is extensive (664 lines), exercising trigger actions, placements, controlled/uncontrolled visibility, arrow configuration, and semantic class/style slots, and mocks @rc-component/trigger directly (tests/__mocks__/@rc-component/trigger.js) to isolate Tooltip’s own prop-forwarding logic; popup.test.tsx by contrast is a minimal smoke test for the Popup component. The codebase is fully typed with no any escapes in the public surface, and CI enforces lint, tsc --noEmit, and test on every push.

What Makes It Unique It doesn’t attempt to reinvent tooltip positioning — that’s intentionally delegated to @rc-component/trigger — and its actual contribution is a clean, narrow prop surface with semantic classNames/styles theming slots and accessible aria-describedby wiring baked in by default. Its real significance is ecosystem reach: it’s the tooltip primitive that Ant Design’s own Tooltip component is built on, making it one of the most widely-vendored tooltip implementations in the React ecosystem, transitively pulled in by a very large number of downstream UI libraries.