Animated Tooltip Component

Create a React component that displays a tooltip with smooth scale and fade animations that appear to emanate from the trigger element.

Requirements

The component should:

1. Render a button that triggers a tooltip when hovered
2. Display tooltip content that includes a title and description text
3. Implement smooth animations for the tooltip:
   • Scale animation: The tooltip should scale from 0.9 to 1.0 when opening
   • Fade animation: The tooltip should fade from 0 to 1 opacity when opening
   • Transform origin: The animation should appear to emanate from the trigger button position
4. Position the tooltip above the button by default
5. Export the component as the default export

Constraints

• The tooltip must use CSS transitions for animations (not JavaScript animation libraries)
• Animation duration should be 200ms
• Use a smooth easing function for the transitions

Test Cases

• Hovering over the button displays the tooltip with animation @test
• The tooltip has correct ARIA attributes for accessibility @test
• The tooltip content includes both title and description @test

Implementation

@generates

API

export default function AnimatedTooltip(): JSX.Element;

Dependencies { .dependencies }

@radix-ui/react-tooltip { .dependency }

Provides accessible tooltip primitives with positioning and state management.