Popover

Anchored content panel with placement and dismissal controls.

Overview

  • Use a popover for contextual content that needs more space than a tooltip.

Aliases

anchored surface

When to use

  • Use Popover for contextual content or controls that belong near the triggering element.
  • Keep the panel focused on the triggering control.

When not to use

  • Do not use Popover for critical modal tasks.
  • Do not use Popover for single-sentence hints; use Tooltip.

Structural parts

open control

trigger

Control that opens the popover.

anchored container

surface

Floating contextual surface.

Public interface

Props
NameTypeDefaultDescription
openbooleanfalseControlled open state.
placement'top' | 'right' | 'bottom' | 'left''bottom'Preferred anchor placement.
size'sm' | 'md''md'Chooses the popover size recipe.
closeOnEscapebooleantrueAllows Escape dismissal.
closeOnOutsidePressbooleantrueAllows outside press dismissal.
onOpenChange(detail: { open: boolean }) => void—Runs when the popover opens or closes.
themeThemeContract—Sets the theme used to resolve component styles.
Events
NamePayloadDescription
openchange{ open: boolean }Fires when an overlay-style component opens or closes through user interaction.
Slots
NameDescription
triggerTrigger content.
defaultPopover body content.

Variants, sizes, and states

Variants

  • top/right/bottom/left: Placement chooses the preferred anchored direction with collision handling.

Sizes

  • sm: Compact popover
  • md: Default popover

States

  • closed: Popover hidden
  • open: Popover visible

Accessibility

Semantics

  • Uses overlay semantics that reflect whether the surface is modal, contextual, or advisory.
  • Uses a contextual overlay surface that remains associated with the trigger.

Keyboard

  • Supports Escape dismissal when allowed.
  • Returns focus to the trigger after closing.

Screen readers

  • Announces the overlay surface with its title, description, or tooltip content as available.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-motion-duration
200ms
--dk-popover-offset
12px

surface

--dk-popover-surface-bg
#f2f5fb
--dk-popover-surface-fg
#16181c
--dk-popover-surface-border
#95989d
--dk-popover-surface-radius
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-popover-surface-shadow
0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04)
--dk-popover-surface-width
260px
--dk-popover-surface-padding
clamp(1.778rem, 1.6296rem + 0.658vw, 2.222rem)

content

--dk-popover-content-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

Examples

Starter

Contextual surface

An anchored content panel.

<Popover placement="bottom"><svelte:fragment slot="trigger">Open popover</svelte:fragment>Popover body</Popover>

Common patterns

Side placement

Side placement works well for toolbar or inline action clusters.

<Popover placement="right"><svelte:fragment slot="trigger">Details</svelte:fragment>Supporting context</Popover>

Edge cases

Controlled contextual state

Control popover state when the surrounding app owns its visibility.

<Popover open={isOpen} onOpenChange={(detail) => isOpen = detail.open}><svelte:fragment slot="trigger">Open popover</svelte:fragment>Popover body</Popover>

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

default (size=sm)

pass

size=sm

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, anchoredSurface
  • Evaluated: contrast, anchoredSurface
  • Contrast: 98.5 Lc
  • Surface: 220 × 220 px

default (size=md)

pass

size=md

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, anchoredSurface
  • Evaluated: contrast, anchoredSurface
  • Contrast: 98.5 Lc
  • Surface: 260 × 220 px

large

pass

size=lg

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, anchoredSurface
  • Evaluated: contrast, anchoredSurface
  • Contrast: 98.5 Lc
  • Surface: 320 × 220 px