Tooltip
Accessible informational popups triggered by keyboard focus or hover, complying with WCAG 1.4.13 Content on Hover or Focus.
Wrapping Interactive Elements
Free-standing Help & Info Icons
Code
Wrapping Non-Interactive Text
Total Due:
Code
API reference
TooltipProps
contentReact.ReactNode—
Name: content
Description: Tooltip body copy or elements displayed inside the popover.
Type: React.ReactNode
Default: —
labelstring—
Name: label
Description: Accessible name for icon-only triggers (aria-label).
Type: string
Default: —
contentHeadingstring—
Name: contentHeading
Description: Optional bold heading rendered above the tooltip body.
Type: string
Default: —
placement'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end''top'
Name: placement
Description: Preferred placement of tooltip relative to the anchor trigger.
Type: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
Default: 'top'
defaultIcon'help' | 'info'—
Name: defaultIcon
Description: Built-in icon anchor when no children are provided.
Type: 'help' | 'info'
Default: —
customIconReact.ReactNode—
Name: customIcon
Description: Custom SVG or icon element for free-standing triggers.
Type: React.ReactNode
Default: —
isSmallbooleanfalse
Name: isSmall
Description: Compact tooltip size with reduced padding.
Type: boolean
Default: false
showDashedUnderlinebooleantrue
Name: showDashedUnderline
Description: Whether to show dashed underline on non-interactive wrapped text.
Type: boolean
Default: true
shouldNotWrapbooleanfalse
Name: shouldNotWrap
Description: Prevents wrapping child in a button if child already handles keyboard events.
Type: boolean
Default: false
openboolean—
Name: open
Description: Controlled visibility state.
Type: boolean
Default: —
onOpenChange(open: boolean) => void—
Name: onOpenChange
Description: Callback fired when tooltip visibility changes.
Type: (open: boolean) => void
Default: —
delaynumber150
Name: delay
Description: Delay in milliseconds before opening on hover.
Type: number
Default: 150
childrenReact.ReactNode—
Name: children
Description: Anchor element to wrap as trigger.
Type: React.ReactNode
Default: —
Accessibility (WCAG 1.4.13 Compliance)
- Dismissible: Pressing Escape immediately dismisses the tooltip without moving pointer focus.
- Hoverable: Users can safely move their mouse cursor over the tooltip body without it disappearing, allowing them to read, inspect, or select text.
- Persistent: The tooltip remains visible until the user moves the pointer away, removes focus, or presses Escape.
- Semantic Association: Uses
role="tooltip"with a unique ID linked viaaria-describedbyon the trigger. - Keyboard Accessible: Free-standing icons and wrapped non-interactive text render as keyboard-focusable buttons (with optional dotted underlines) so keyboard-only users can navigate to and discover the tooltip.
- Zero 3rd-Party Dependencies: Implemented entirely with native React state and modern CSS positioning.