What is the difference between a tooltip and a popover?

A tooltip provides a short non-interactive description for an existing control and does not receive focus. A popover can contain interactive content and needs an explicit focus and dismissal contract. Geometry may look similar, but their semantics are different.

Should floating UI always use a portal?

No. A portal helps escape clipping and stacking contexts, but it changes DOM ancestry and event assumptions. Prefer the simplest host that meets clipping, top-layer, accessibility, and ownership needs.

How should placement fallback work?

Measure the anchor, floating surface, viewport, clipping ancestors, safe areas, and writing direction. Try the preferred placement, then ordered alternatives, shift within the safe area, and constrain size if needed. Placement is a policy, not a magic coordinate.

How does a popover follow a scrolling anchor?

Observe relevant scroll and resize sources, batch reads and writes in animation frames, and stop work when the layer is closed or offscreen. Close or pin the surface if the anchor leaves its valid context according to product policy.

What should dismiss a popover?

Usually Escape, an explicit close action, a completed selection, and pointer interaction outside the owned layer tree. Tooltips follow hover and focus timing instead. Nested floating layers need one branch-aware dismissal manager.

Can CSS anchor positioning replace JavaScript positioning?

It can remove much measurement code where supported and express fallback positions declaratively. A platform still needs semantics, focus, dismissal, layering, feature detection, and a tested fallback for its browser matrix.

FSD-007Frontend system design Premium

Design a Tooltip, Popover, and Floating-Layer Platform

Design a floating-layer platform that separates semantics from geometry, handles collision and scrolling, and preserves accessible interaction.

23 August 2026Intermediate 41 min read

Build one geometry engine and several semantic adapters. Tooltip, menu, listbox popup, teaching bubble, and non-modal dialog can share anchor measurement and collision fallback, but they must not share one vague focus and dismissal behavior.

Floating UI looks like a box next to another box. In practice, it crosses layout, scrolling, portals, writing modes, viewport changes, keyboard input, pointer intent, and accessibility semantics.

The platform stays understandable when it separates what a surface means from where it fits.

Start with semantic families

The trigger chooses a semantic adapter before the geometry engine runs:

tooltip: descriptive, non-interactive, focus remains on the trigger;
menu: composite action list with menu keyboard behavior;
listbox popup: option selection owned by a combobox or button;
popover or non-modal dialog: interactive content with a deliberate focus contract;
teaching bubble: product guidance with dismissal and persistence policy.

Two surfaces can use the same bottom-start placement and still require completely different roles, keyboard behavior, and announcements.

The public interview prompt

Design a reusable tooltip, popover, and floating-layer platform. Explain:

semantic adapters, controlled state, trigger ownership, and nested layer trees;
anchor measurement, clipping, collision, flip, shift, size, arrow, and writing direction;
portals, browser top layer, CSS anchor positioning, scroll and resize updates;
focus, hover intent, Escape, outside interaction, restoration, and touch;
loading, detached anchors, route changes, zoom, mobile, and reduced motion;
security, performance, observability, testing, rollout, and evolution.

Assume modern browsers with a documented fallback matrix. Version one supports element anchors in one document, not arbitrary canvas coordinates, cross-frame anchors, or collaborative cursors.

What the premium solution covers

The complete solution defines semantic and geometry contracts, anchor and clipping measurements, ordered fallback scoring, browser top-layer and portal adapters, CSS anchor-positioning adoption, branch-aware dismissal, focus policies, tooltip timing, touch and mobile behavior, detached anchors, performance budgets, privacy, deterministic geometry tests, rollout gates, and an interview scoring rubric.

Original media shows a surface colliding, flipping, and following its anchor, while a separate diagram maps semantic families to focus and dismissal behavior. A deterministic lab lets you move an anchor and switch surface semantics without conflating the two concerns.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

Detailed, beginner-friendly explanation
Production failure modes and trade-offs
Mobile-friendly architecture diagrams
Senior and staff-level interview signals

Unlock Premium

Frequently asked questions

What is the difference between a tooltip and a popover?: A tooltip provides a short non-interactive description for an existing control and does not receive focus. A popover can contain interactive content and needs an explicit focus and dismissal contract. Geometry may look similar, but their semantics are different.
Should floating UI always use a portal?: No. A portal helps escape clipping and stacking contexts, but it changes DOM ancestry and event assumptions. Prefer the simplest host that meets clipping, top-layer, accessibility, and ownership needs.
How should placement fallback work?: Measure the anchor, floating surface, viewport, clipping ancestors, safe areas, and writing direction. Try the preferred placement, then ordered alternatives, shift within the safe area, and constrain size if needed. Placement is a policy, not a magic coordinate.
How does a popover follow a scrolling anchor?: Observe relevant scroll and resize sources, batch reads and writes in animation frames, and stop work when the layer is closed or offscreen. Close or pin the surface if the anchor leaves its valid context according to product policy.
What should dismiss a popover?: Usually Escape, an explicit close action, a completed selection, and pointer interaction outside the owned layer tree. Tooltips follow hover and focus timing instead. Nested floating layers need one branch-aware dismissal manager.
Can CSS anchor positioning replace JavaScript positioning?: It can remove much measurement code where supported and express fallback positions declaratively. A platform still needs semantics, focus, dismissal, layering, feature detection, and a tested fallback for its browser matrix.