React Tooltip Component Implementation

Build a reusable tooltip component in React using TypeScript. This component will display a small informational box when a user hovers over a target element, enhancing user experience by providing context without cluttering the interface.

Problem Description

You are tasked with creating a flexible and accessible tooltip component in React with TypeScript. The tooltip should appear when a user hovers over a specified trigger element and disappear when the hover ends. It should be easily customizable and handle different positioning scenarios.

Key Requirements:

1. Trigger Element: The tooltip should be attached to a specific "trigger" React element.
2. Tooltip Content: The tooltip should accept arbitrary React nodes as its content.
3. Visibility Control: The tooltip should be visible only when the trigger element is hovered over.
4. Positioning: The tooltip should be positioned relative to the trigger element. Support at least "top", "bottom", "left", and "right" positioning.
5. Styling: Provide basic styling for the tooltip, but allow for easy customization through props or CSS classes.
6. TypeScript: Implement the component using TypeScript, ensuring strong typing for all props and internal state.
7. Accessibility: Consider basic accessibility, such as ARIA attributes, if applicable.

Expected Behavior:

• When the mouse enters the trigger element, the tooltip should appear.
• When the mouse leaves the trigger element, the tooltip should disappear.
• The tooltip should be visually distinct and easy to read.
• The tooltip should not obstruct critical content when positioned.

Edge Cases to Consider:

• What happens if the trigger element is near the edge of the viewport and the tooltip would overflow?
• How should the tooltip behave if the trigger element is dynamically rendered or removed?
• Handling rapid mouse entry/exit.

Examples

Example 1: Basic Tooltip

Input Component Structure:

<Tooltip content="This is a basic tooltip">
  <button>Hover Me</button>
</Tooltip>

Expected Output:

When the "Hover Me" button is hovered, a small box with the text "This is a basic tooltip" appears above (or below, depending on default positioning) the button. When the hover ends, the tooltip disappears.

Explanation: The Tooltip component wraps the button. The content prop provides the text to display. The component internally manages the visibility based on hover events on the button.

Example 2: Tooltip with Custom Content and Positioning

Input Component Structure:

<Tooltip content={<div><strong>Important!</strong><br />Read this carefully.</div>} position="right">
  <span style={{ borderBottom: '1px dashed blue', cursor: 'help' }}>More Info</span>
</Tooltip>

Expected Output:

When the "More Info" span is hovered, a tooltip appears to the right of the span. The tooltip contains bolded text "Important!" followed by a new line and "Read this carefully.".

Explanation: This demonstrates using a React element as content and specifying the position prop to control where the tooltip appears relative to the trigger element.

Constraints

• The tooltip component should be implemented as a functional React component using Hooks (e.g., useState, useEffect, useRef).
• Styling should be achievable with CSS classes and/or inline styles passed via props. Avoid hardcoding excessive styles within the component logic itself.
• The component should be performant, with minimal re-renders.
• The tooltip content should not be rendered until it is needed (i.e., on hover).

Notes

• Consider using useRef to get a reference to the trigger element for positioning calculations.
• The onMouseEnter and onMouseLeave event handlers will be crucial for controlling tooltip visibility.
• For positioning, you might need to calculate the offset based on the trigger element's bounding rectangle. Libraries like popper.js (or its React wrappers) can be helpful for more complex positioning, but a basic implementation without external libraries is expected for this challenge.
• Think about how to handle the case where the tooltip content is very long.