@rc-component/tooltip

English | 简体中文

Highlights

• Supports hover, focus, click, and controlled visibility through one trigger layer.
• Provides built-in placements, custom alignment, delays, arrows, and popup motion.
• Exposes semantic classNames and styles slots for root, arrow, and container nodes.
• Keeps accessibility wiring through generated tooltip ids and aria-describedby.

Install

npm install @rc-component/tooltip

Usage

pure
import Tooltip from '@rc-component/tooltip';
import '@rc-component/tooltip/assets/bootstrap_white.css';
export default () => (   <Tooltip placement="top" overlay={<span>Tooltip content</span>}>     <button type="button">Hover me</button>   </Tooltip> );

Online preview: https://tooltip.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Tooltip

| Name | Type | Default | Description | | --------------------- | ---------------------------------------------------- | ------------------- | ---------------------------------------------------------- | | afterVisibleChange | (visible: boolean) => void | - | Called after popup visibility changes. | | align | AlignType | {} | Extra popup alignment config. | | arrowContent | React.ReactNode | - | Custom arrow content. | | builtinPlacements | TriggerProps['builtinPlacements'] | built-in placements | Placement map passed to trigger. | | children | React.ReactElement | - | Required trigger element. | | classNames | Partial<Record<SemanticName, string>> | - | Semantic class names for root, arrow, and container nodes. | | defaultVisible | boolean | - | Initial uncontrolled visible state. | | destroyOnHidden | boolean | false | Destroy popup DOM when hidden. | | disabled | boolean | false | Temporarily hide tooltip while preserving visible state. | | fresh | boolean | - | Keep popup content fresh when closed. | | getTooltipContainer | (node: HTMLElement) => HTMLElement | - | Resolve popup container. | | id | string | generated id | Tooltip id used for accessibility. | | motion | TriggerProps['popupMotion'] | - | Popup motion config. | | mouseEnterDelay | number | 0 | Delay in seconds before showing on mouse enter. | | mouseLeaveDelay | number | 0.1 | Delay in seconds before hiding on mouse leave. | | onPopupAlign | TriggerProps['onPopupAlign'] | - | Called after popup alignment. | | onVisibleChange | (visible: boolean) => void | - | Called when visibility changes. | | overlay | React.ReactNode \| () => React.ReactNode | - | Tooltip content. | | placement | string | 'right' | Popup placement. | | prefixCls | string | 'rc-tooltip' | Prefix class name. | | showArrow | boolean \| ArrowType | true | Whether to show arrow or provide arrow config. | | styles | Partial<Record<SemanticName, React.CSSProperties>> | - | Semantic styles for root, arrow, and container nodes. | | trigger | ActionType \| ActionType[] | ['hover'] | Actions that show the tooltip. | | unique | TriggerProps['unique'] | - | Experimental unique container reuse config. | | visible | boolean | - | Controlled visible state. | | zIndex | number | - | Popup z-index. |

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/tooltip is released under the MIT license.