CSS Module 17
Forms, tables, popovers and anchor positioning interview questions
Interview questions on forms, tables, popovers and anchor positioning: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Mid
What is the difference between position-area and anchor()?
Answered in the lesson Anchor positioning for tooltips and menus
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Mid to senior
In a product list, every row's info tooltip is anchored with anchor-name: --info. After launch, each tooltip opens beside the last row, and tooltips of rows scrolled out of a side panel float over the page. Explain both faults, fix them, and say how you would test the fix.
- What it tests
- How a repeated anchor name resolves, anchor-scope, position-visibility, and testing anchored layout across engines.
- First step
- Read the lookup rule: when several elements share an anchor name, a box uses the last one in the document, so every tooltip finds the last row. anchor-scope: --info on each row limits the name to that row. Then check position-visibility: its initial value hides a box whose anchor scrolls out of view, unless something set always.
- Follow-ups
-
- Why not give each row a unique anchor name instead?
- What changes if each tooltip is a popover opened by its row's button?
- Which differences between engines would you test for?
From the lesson Anchor positioning for tooltips and menus
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to staff
Design a help tooltip for a form field that works with a mouse, the keyboard, touch and screen readers, is placed with anchor positioning, and still works in an engine without it. What does CSS do, what do HTML and script do, and how does it meet WCAG 2.2?
- What it tests
- Separating placement from behaviour, success criterion 1.4.13, tooltip semantics, popover types and progressive enhancement.
- First step
- Split the job. CSS places the box: position-area: top with flip-block and a gap. HTML and script decide when it shows: on hover and focus, hidden on blur, on pointer leave after a short delay and on Escape. The button points to the tooltip with aria-describedby, and the tooltip has role="tooltip".
- Follow-ups
-
- Should the tooltip be a popover, and of which type?
- What happens on a phone, where there is no hover?
- What does the fallback look like in an engine without anchor positioning?
From the lesson Anchor positioning for tooltips and menus
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes