React Tooltip Component Implementation

This challenge asks you to build a reusable tooltip component in React using TypeScript. Tooltips are essential for providing contextual information to users on hover, enhancing usability and guiding them through interfaces. This component should be flexible, customizable, and handle various positioning scenarios.

Problem Description

You need to implement a Tooltip component that displays a tooltip message when a designated element is hovered over. The component should accept the following props:

• children: The React node to which the tooltip is attached. This is the element that triggers the tooltip on hover.
• text: The string content to be displayed within the tooltip.
• position: A string indicating the position of the tooltip relative to the children element. Valid values are: "top", "bottom", "left", "right". Defaults to "top".
• delay: A number representing the delay (in milliseconds) before the tooltip appears. Defaults to 500.
• className: A string allowing for custom CSS styling of the tooltip container.
• style: An object allowing for inline styling of the tooltip container.

The component should:

• Display the tooltip only when the children element is hovered over.
• Respect the specified position prop to place the tooltip accordingly.
• Implement a delay before showing the tooltip, as specified by the delay prop.
• Hide the tooltip when the mouse leaves the children element.
• Be styled appropriately (basic styling is acceptable, but the className and style props should allow for customization).

Expected Behavior:

1. When the user hovers over the children element, a timer starts.
2. After the specified delay, the tooltip appears in the position indicated by the position prop.
3. When the user moves the mouse away from the children element, a timer starts again.
4. After a short delay (e.g., 100ms), the tooltip disappears.

Edge Cases to Consider:

• What happens if position is an invalid value? (Should default to "top")
• How should the component handle very short or very long tooltip text? (Basic truncation or wrapping is acceptable)
• Consider accessibility - ensure the tooltip is accessible to users with disabilities (e.g., using appropriate ARIA attributes). While full accessibility compliance isn't required, demonstrate awareness.

Examples

Example 1:

Input: <Tooltip text="This is a top tooltip" position="top">Hover me</Tooltip>
Output: A tooltip displaying "This is a top tooltip" positioned above the "Hover me" element after a 500ms delay.
Explanation: The component renders the "Hover me" element and a hidden tooltip. On hover, the tooltip appears above the element after the delay.

Example 2:

Input: <Tooltip text="Bottom tooltip" position="bottom" delay={200} className="my-custom-tooltip">Hover me</Tooltip>
Output: A tooltip displaying "Bottom tooltip" positioned below the "Hover me" element after a 200ms delay, with the CSS class "my-custom-tooltip" applied.
Explanation: Demonstrates using the `position`, `delay`, and `className` props.

Example 3:

Input: <Tooltip text="Left tooltip" position="left" style={{ backgroundColor: 'yellow' }}>Hover me</Tooltip>
Output: A tooltip displaying "Left tooltip" positioned to the left of the "Hover me" element, with a yellow background.
Explanation: Demonstrates using the `position` and `style` props for inline styling.

Constraints

• The component must be implemented using React and TypeScript.
• The tooltip should appear and disappear smoothly (avoid abrupt transitions).
• The delay prop should be a positive integer.
• The component should be reusable and customizable.
• The component should not introduce any unnecessary dependencies.
• The tooltip should not block the underlying element from being interacted with.

Notes

• Consider using useState and useEffect hooks to manage the tooltip's visibility and timing.
• You can use CSS for styling, but the className and style props should allow for external customization.
• Think about how to handle different screen sizes and ensure the tooltip doesn't go off-screen. A simple check for screen boundaries is sufficient.
• Focus on creating a functional and well-structured component. Extensive styling is not the primary focus of this challenge.
• Remember to include appropriate ARIA attributes to enhance accessibility. aria-describedby is a good starting point.