Presentation
Popovers
Lightweight contextual content anchored to a trigger — the same .uiContextualLayer system as Context Menus and Menus, viewed as a presentation surface.
Findings
What's actually in /ig
- .uiContextualLayer/.uiContextualLayerPositioner provide the anchoring; ._558b ._54ng provides the bordered, shadowed surface — identical mechanism to Context Menus, just hosting richer content than an action list.
Usage
When to use it
Use when
A trigger needs to surface richer content than a plain action list — a mini form, a preview card, an emoji picker, an inline help explanation.
Avoid when
The content is purely a command list (use Context Menus or Menus) or requires full-screen focus (use Modals & Panels).
Anatomy
Anatomy
- 01
Trigger
- 02
Contextual layer (position:absolute)
- 03
Surface (border + shadow)
- 04
Richer content (form, preview, or info block)
Specification
Spacing, colour, type, and motion
- Surface
- background:#fff, border:1px solid rgba(0,0,0,.15), border-radius:3px, box-shadow:0 3px 8px rgba(0,0,0,.3) — identical to Context Menus
- Positioning
- .uiContextualLayerPositioner (in-flow) or .uiContextualLayerPositionerFixed (fixed) — chosen by whether the trigger is in a scrollable context
- Z-index
- 202 — above most overlapping content but below modals
States
States
| State | Behaviour |
|---|---|
| Hidden | Layer is not rendered or is display:none; trigger is at rest. |
| Open | Layer positioned relative to the trigger; surface visible with border and shadow. |
| Repositioned | When the trigger is near a viewport edge, the Positioner flips the layer to the opposite side — no re-animation required. |
Examples
Real interface compositions
Hover preview
Account preview popover
Hovering @camila.city anchors a profile card with avatar, bio, mutual followers, and Follow action to the username instead of sending the user into a full profile page.
.uiContextualLayer anchoring, bordered surface, 3px radius, shadow
Guidance
Usage guidance
- Don't design a new anchoring mechanism — reuse the documented contextual-layer positioning shared with Context Menus and Menus.
Do / Don't
Do / Don't
Do
- Reuse .uiContextualLayer positioning — it handles edge-flip and scroll containment; don't build a new anchoring system for popover-like content.
Don’t
- Use a Popover for full-screen takeover content — that's a Modal. Popovers stay anchored and small.
See also