Night at the East Wing · Tooltips

Tooltips shown on hover or keyboard focus after a delay, hidden the instant you leave. Elements stay in the DOM — only visibility changes.

Three exhibits, three labels that appear only after a hover — and a 600 ms think.

Tooltips is an easy Mouse & Keyboard challenge on Fun UI Playground. Tooltips shown on hover or keyboard focus after a delay, hidden the instant you leave. Elements stay in the DOM — only visibility changes. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “tooltips-”, and the techniques it exercises are hover-triggered tooltips, delayed appearance, aria-describedby, visibility assertions.

At a glance

Category
Mouse & Keyboard
Difficulty
easy
Teaches
hover-triggered tooltips · delayed appearance · aria-describedby · visibility assertions
Backend
None — runs entirely in the browser
Locators
Stable id and data-testid, prefixed tooltips-

Selectors on this page

LocatorWhat it is
#tooltips-exhibit-1 #tooltips-tip-1Exhibits: #tooltips-exhibit-1 … -3 (focusable buttons) with tooltips #tooltips-tip-1 … -3 (role="tooltip")

Frequently asked questions

How do I test a tooltip that appears after a delay?

Hover or focus #tooltips-exhibit-1 … -3 and wait for the matching #tooltips-tip-N (role="tooltip") to become visible. The tips are always attached, so a presence check passes before the tooltip has appeared. ?delay=0 removes the 600 ms wait for CI.

Should I assert presence or visibility for a tooltip?

Visibility. These tips stay in the DOM at all times and only their visibility changes — exactly the case where a presence-based wait resolves immediately and whatever you assert next races the UI.

More Mouse & Keyboard

Updated

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.