← All exercises

Hover, Tooltips & Menus

medium

Nothing here reacts to a click alone — you have to move the mouse like a user.

Hover to reveal

The action buttons are invisible until you hover the card (or focus into it). Click one — a plain click at its coordinates without hovering first will miss.

Ada Chen

Senior QA Engineer

Marco Ruiz

Automation Architect

Hover a card, then click a revealed action.

Tooltips

The first tooltip is pure CSS (instant on hover/focus). The second is JavaScript-driven and only appears after hovering for 500 ms — a quick mouse-over won't trigger it.

CSS tooltips appear instantly on hover.

Nested hover menu

Hover Products to open the dropdown, then hover Testing tools to reveal the flyout, then click a leaf item. Moving the mouse off the menu tree closes everything.

Nothing chosen yet.

Context menu

Right-click inside the dashed area to open a custom context menu at the cursor. Pick an action, or click anywhere else to close it.

Right-click here

Right-click the area to open the menu.