Accessible tooltips and popovers with smart positioning.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

content(required)

• Type: string
• Content to display in the tooltip/popover

mode

• Type: TooltipMode - Default: 'tooltip'
• Mode: tooltip (hover) or popover (click)

position

• Type: TooltipPosition - Default: 'top'
• Preferred position

delay

• Type: number - Default: 200
• Delay before showing tooltip (ms)

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

children(required)

• Type: React.ReactNode
• Trigger element (children)

className

• Type: string
• Additional CSS class

a11yLabel

• Type: string
• Accessibility label

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-tooltip-popover - Component wrapper