@rc-component/tooltip

_{Part of the Ant Design ecosystem.}

💡 Positioned React tooltip for hover, focus, click, and controlled popup flows.

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

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.
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.