Tooltip

Build a tooltip as a single React component: a button that reveals a small bubble above it when you point at it or tab to it, and hides the bubble when you move away or tab off. It's one boolean of state — but doing it right means the tooltip answers to focus and blur, not just the mouse, so keyboard users get it too.

Task

The starter App.tsx renders the Hover me button with the tooltip hidden. Make it interactive:

1. Hold the state. Track a show boolean with useState(false).
2. Open on hover or focus. Wire the button's onMouseEnter and onFocus to setShow(true).
3. Close on leave or blur. Wire onMouseLeave and onBlur to setShow(false).
4. Render the bubble when show is true inside .tip-wrap: <span className="tooltip" role="tooltip">Saved to your library</span>.

Examples

• Point at the button: a dark bubble reading "Saved to your library" appears just above it, with a small arrow pointing down at the button. Move away: it disappears.
• Tab to the button with the keyboard: the same bubble appears (via onFocus). Tab away: it hides (via onBlur).
• The bubble is only in the DOM while show is true — there is no hidden element sitting around.

Notes

• Hover is not enough. A hover-only tooltip is invisible to keyboard users. Wiring onFocus/onBlur alongside the mouse events is what makes it accessible.
• Conditional render, not CSS hiding. In React you render the tooltip only when show is true ({show && <span .../>}) rather than keeping it mounted and toggling display.
• role="tooltip" labels the bubble for assistive tech.
• The layout, colours, and the arrow (.tooltip::after) are already in styles.css; focus on the state and the four handlers.