Directional Info Card

Build a React component that displays helpful information cards that appear in different directions relative to their trigger buttons.

Requirements

Create a DirectionalInfoCard component that:

• Accepts a direction prop that can be "top", "right", "bottom", or "left"
• Accepts a buttonText prop for the trigger button label
• Accepts an infoText prop for the information content to display
• Renders a button that, when hovered, displays the information card in the specified direction
• The information card should appear positioned relative to the button based on the direction prop

Test Cases

• When direction is "top", hovering the button displays the info card above it @test
• When direction is "right", hovering the button displays the info card to the right of it @test
• When direction is "bottom", hovering the button displays the info card below it @test
• When direction is "left", hovering the button displays the info card to the left of it @test

Implementation

@generates

API

import React from 'react';

export interface DirectionalInfoCardProps {
  direction: 'top' | 'right' | 'bottom' | 'left';
  buttonText: string;
  infoText: string;
}

export function DirectionalInfoCard(props: DirectionalInfoCardProps): React.ReactElement;

Dependencies { .dependencies }

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

Provides tooltip positioning and interaction capabilities.

@satisfied-by

React { .dependency }

Core React library for building UI components.

@satisfied-by