Tooltip Manager Component

Build a React component that displays multiple tooltips with configurable behavior for user interface elements. The component should support both interactive tooltips (where users can hover over the tooltip content itself) and simple tooltips (that close immediately when the mouse leaves the trigger element).

Requirements

Your implementation should provide:

1. Multiple Tooltip Display: Support displaying tooltips for at least three different UI elements (e.g., buttons, icons, or text labels)

2. Hoverable Content Toggle: Support two distinct tooltip closing behaviors:

   • Interactive mode (default): Tooltips remain open when users move their cursor from the trigger element toward the tooltip content, allowing users to interact with content inside the tooltip
   • Simple mode: Tooltips close immediately when the cursor leaves the trigger element

3. Global Configuration: Provide a way to set the closing behavior globally for all tooltips in the application

4. Per-Tooltip Override: Allow individual tooltips to override the global closing behavior setting

5. Visual Indication: Display which mode each tooltip is using (interactive vs simple) through visible styling or labels on the trigger elements

Test Cases

Your implementation should pass these tests:

• When the global setting is configured for simple mode, tooltips close immediately when the mouse leaves any trigger element @test

• When the global setting is configured for interactive mode, tooltips remain open when the mouse moves from the trigger toward the tooltip content @test

• When a specific tooltip overrides the global interactive setting to use simple mode, that tooltip closes immediately upon mouse leave while other tooltips follow the global setting @test

• All tooltip trigger elements are keyboard accessible and tooltips can be opened with keyboard focus @test

Implementation

@generates

API

import React from 'react';

/**
 * Props for the TooltipManager component
 */
export interface TooltipManagerProps {
  /**
   * If true, tooltips close immediately when cursor leaves trigger.
   * If false, tooltips remain open when cursor moves toward content.
   * Default: false (interactive mode)
   */
  disableInteractiveContent?: boolean;
}

/**
 * TooltipManager component that demonstrates tooltip behavior configuration.
 * Displays multiple tooltips with configurable closing behaviors.
 */
export const TooltipManager: React.FC<TooltipManagerProps>;

Dependencies { .dependencies }

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

Provides accessible tooltip primitives for React applications with configurable interaction patterns.

@satisfied-by