Animated Tooltip

A spring-animated tooltip component with smooth enter/exit transitions and multiple placement options.

~8.6 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add animated-tooltip

Features

Four placement options (top, bottom, left, right)
Spring-animated enter/exit transitions
Keyboard accessible with Escape to dismiss
Hover device detection
Respects reduced motion preferences
Arrow indicator pointing to trigger
Supports rich content via ReactNode
Optional show delay

Accessibility

Keyboard Interactions

Key	Description
`Escape`	Dismisses the tooltip when focused
`Tab`	Focus/blur on the trigger shows/hides the tooltip

ARIA Attributes

Attribute	Element	Purpose
`role="tooltip"`	Tooltip content	Identifies the element as a tooltip
`aria-describedby`	Trigger wrapper	Associates the trigger with the tooltip content when visible
`aria-hidden="true"`	Arrow element	Hides the decorative arrow from screen readers

The tooltip content is linked to the trigger via aria-describedby using a unique useId-generated ID, so screen readers announce the tooltip text when the trigger is focused.

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the tooltip appears and disappears instantly without spring or slide animations.