User Profile Card with Hover Tooltips

Build a user profile card component that displays tooltips when hovering over different sections of the card. The tooltips should provide additional information about the user and handle hover interactions properly.

Requirements

Create a React component that displays a user profile card with the following elements:

1. Username Section: Display a username with a tooltip that shows when the user joined (e.g., "Member since: January 2024")

2. Status Badge: Display a status indicator (online/offline/away) with a tooltip explaining the current status

3. Action Buttons: Display two action buttons:

   • "Message" button with a tooltip: "Send a direct message to this user"
   • "Follow" button with a tooltip: "Follow this user to see their updates"

The tooltips must:

• Appear when hovering over the trigger elements
• Use a 500ms delay for the username tooltip
• Use a 300ms delay for the status badge tooltip
• Use a 200ms delay for the action button tooltips
• Close when the pointer leaves the trigger element

Test Cases

• When hovering over the username, the tooltip displays "Member since: January 2024" after 500ms @test
• When hovering over the status badge, the tooltip displays the status description after 300ms @test
• When hovering over the Message button, the tooltip displays "Send a direct message to this user" after 200ms @test
• When the pointer leaves a trigger element, the tooltip closes @test

Implementation

@generates

API

export interface UserProfileCardProps {
  username: string;
  memberSince: string;
  status: 'online' | 'offline' | 'away';
}

export function UserProfileCard(props: UserProfileCardProps): JSX.Element;

Dependencies { .dependencies }

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

Provides tooltip components with hover interaction support.

@satisfied-by