Tooltip

Objective: Implement a tooltip component that appears when hovering over an element and allows positioning control.

Instructions:

1. Create a tooltip that appears when the user hovers over an element.

Requirements:

• The tooltip should appear on hover and disappear when the hover ends.
• Allow customization of the tooltip's position (top, bottom, left, or right).
• Implement a customizable delay before the tooltip shows and hides.

Hints:

1. Use CSS for the positioning of the tooltip and for handling the hover effect.
2. You can use JavaScript to manage the delay and control when the tooltip appears or disappears.
3. Ensure that the tooltip remains visible while the user hovers over it.
4. With React, you can experiment with portals.