Interactive Button Tooltips

Build a React component that displays a set of action buttons, each with an informative tooltip that appears when the user hovers over or focuses on the button.

Requirements

Create a ButtonGroup component that renders three action buttons:

• A "Save" button with a tooltip saying "Save your changes"
• A "Delete" button with a tooltip saying "Delete this item"
• A "Share" button with a tooltip saying "Share with others"

Each tooltip should:

• Appear above the button when triggered
• Include a visual arrow pointing to the button
• Be rendered in a portal to avoid layout issues
• Have appropriate timing delays configured globally

The implementation should use proper component composition to build the tooltip functionality.

Implementation

@generates

API

export function ButtonGroup(): JSX.Element;

Dependencies { .dependencies }

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

Provides accessible tooltip primitives for React.

Test Cases

Basic rendering

• The component renders three buttons with labels "Save", "Delete", and "Share" @test

Tooltip composition

• Each button has an associated tooltip that can be triggered @test
• Tooltips use proper component composition including wrapper, trigger, portal, content, and arrow @test

Tooltip content

• The Save button's tooltip displays "Save your changes" @test
• The Delete button's tooltip displays "Delete this item" @test
• The Share button's tooltip displays "Share with others" @test