Part of the Ant Design ecosystem.
💡 Positioned React tooltip for hover, focus, click, and controlled popup flows.
English | 简体中文
- Supports hover, focus, click, and controlled visibility through one trigger layer.
- Provides built-in placements, custom alignment, delays, arrows, and popup motion.
- Exposes semantic
classNamesandstylesslots for root, arrow, and container nodes. - Keeps accessibility wiring through generated tooltip ids and
aria-describedby.
npm install @rc-component/tooltip
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/
Run the local dumi site:
npm install npm start
Then open http://localhost:8000.
| 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. |
npm install
npm start
npm test
npm run tsc
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnly
The release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/tooltip is released under the MIT license.