Create a class-based React component named Tooltip that displays a list of icons. When a user hovers over an icon, a tooltip should appear showing the name of that icon.
This question tests your ability to handle mouse events (onMouseEnter, onMouseLeave), maintain component state, and use conditional rendering to show or hide UI elements dynamically.
You must use the following list of icons with corresponding labels:
const icons = [
{ emoji: '🏠', label: 'Home' },
{ emoji: '📧', label: 'Email' },
{ emoji: '⚙️', label: 'Settings' }
];
The tooltip should always display the value of the label field from this array, corresponding to the hovered icon.
Component Behavior
- Renders a list of icons (using emoji).
- Each icon has a text label shown only when hovered.
- Tooltip is positioned above the icon.
- Tooltip disappears when the mouse is no longer hovering over the icon.
- Only one tooltip should be visible at a time.
- Tooltip text must match exactly what’s defined in the
label property.
Reference UI
