Build a tooltip that positions itself around a target on hover/focus.
01
01
Understand the problem
ReactPositioningUI
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
Solve in
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
React solution
Complete solutionRun Playground
import React from 'react';
import Tooltip from './src/Tooltip';
export default function App() {
return (
<div style={{ fontFamily: 'sans-serif', padding: 60, textAlign: 'center' }}>
<h1>Tooltip Demo</h1>
<p>
Hover or focus the button:
<Tooltip text="Saves your changes">
<button style={{ padding: '8px 16px', fontSize: 15, cursor: 'pointer' }}>Save</button>
</Tooltip>
</p>
</div>
);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.