Tooltips
Hover and focus-triggered informational overlays with keyboard accessibility.
Hover or focus the elements below to see tooltips.
Positions
On Different Elements
BadgeUnderlined text
Custom Delay
Rich Content
Accessibility Notes
Tooltips are shown on hover and focus, ensuring keyboard users can access the information. Each tooltip uses role="tooltip" paired with aria-describedby on the trigger element so screen readers announce the tooltip content. Pressing Escapedismisses any visible tooltip. Animations respect the user's prefers-reduced-motion setting, disabling transitions when reduced motion is preferred.