Popover

A popover opens beside its trigger with a few details or controls for one item, such as the interview on a candidate's row. The page stays usable, and a click outside closes it without losing what was typed.

When to use it

Use a popover for a small task on one item: rescheduling an interview, logging a call with a candidate, seeing who has read an update. It closes as soon as the task is done or people click elsewhere.

A name or a shortcut belongs in a tooltip, a list of commands in a menu. When people have to answer before going on, open a dialog.

Anatomy

A popover sizes itself to its content. It is at least as wide as its trigger, stops growing at 404 px, and scrolls when it runs out of height.

Width: from the trigger's width to 404 px
Padding: 12 px; --space-3
Corner radius: 12 px; --radius-xl
Title: 14 px on a 20 px line, weight 500; --type-nav
Body text: 14 px on a 22 px line; --type-small
Buttons inside: 36 px, 44 px on touch screens
Gap to the trigger: 8 px; --space-2
Distance from the window edge: at least 8 px; --space-2
Maximum height: 70 percent of the window, or the room on its side
Surface with a mouse: raised fill and shadow, with a fine top highlight and rim in the dark theme; --glass-fill-raised, --glass-highlight, --glass-ring-raised, --elevation-3
Surface on a touch screen: opaque; --surface-1

Placement

A popover opens below its trigger with their start edges aligned. A trigger at the end of a row, such as the date of an interview, aligns with the popover's end edge instead. When less than 280 px remain below and there is more room above, it opens upward. Near the sides it moves inward, and it never covers its own trigger.

Opening and closing

Opening another popover or a menu closes the open one. Below 640 px on a touch screen, a popover that holds a form opens as a bottom sheet.

Click, Enter or Space on the trigger: opens it, with focus on its first control
Tab past the last control: closes it and moves on to the control after the trigger
Escape: closes it, with focus back on the trigger
A click outside: closes it and keeps what was typed
The trigger scrolls out of view: closes it

Permitted and not permitted

Permitted

Reschedule and Copy link for one interview
A small task on the item the popover belongs to.

Not permitted

A warning people must see
A click elsewhere hides it. Use a dialog or a message on the page.
An arrow pointing at the trigger
The gap and the aligned edge already show where it came from.

Accessibility

A popover is a dialog that does not block the page: role dialog without aria-modal, labeled by its title or by a name that says what it is about, such as Interview with Sunita Rai. The trigger carries aria-haspopup, aria-expanded and aria-controls.

Keep what the task depends on out of a popover. A screen reader user can leave it at any moment, and it closes when they do.

NextMenu

Popover

A non modal layer anchored to its trigger that holds a few controls or details for one item.

Kind: component
Page: https://design.werklist.com/components/popover
Version: 2.1.2

When to use it

A small task on one item, such as rescheduling an interview or logging a call with a candidate
Details of one item that people glance at and close
A short form tied to a row, on wide screens

When not to use it

A name or a shortcut: use a tooltip
A list of commands: use a menu
A decision that must come first: use a dialog
A warning: use a dialog or an inline message
A popover opened from a popover
Opening on hover: a popover opens on a click or a key

Anatomy

Layer: above the page (--layer-popover)
Width: from the trigger's width to 404 px, and at most the window width less 16 px
Padding: 12 px (--space-3)
Radius: 12 px (--radius-xl)
Title, optional: 14 px on 20 px, weight 500 (--type-nav, --text)
Body text: 14 px on 22 px (--type-small, --text)
Buttons: 36 px high, 44 px on touch screens
Gap to the trigger: 8 px (--space-2)
Window margin: 8 px (--space-2)
Placement: below the trigger with the start edges aligned, or the end edges for a trigger at the end of a row. Upward when less than 280 px remain below and there is more room above. Never over its own trigger
Maximum height: 70 percent of the window, or the room on its side when that is less. The content scrolls on its own
Surface with a mouse: raised fill and shadow. In the dark theme a 1 px top highlight and a 0.5 px ring (--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised)
Surface on a touch screen: opaque, no blur (--surface-1)

Variants

Anchored: Wide screens and details on phones
As a bottom sheet: A popover that holds a form or more than one control, on a touch screen below 640 px

States

Opening: Fades in over 150 ms, moving 4 px away from the trigger and growing from 98 percent (--duration-fast, --ease-soft)
Closing: Reverse over 150 ms (--duration-fast, --ease-standard)
Reduced motion: Opacity only (--duration-fast)
Trigger open: aria-expanded true on the trigger

Keyboard

Enter or Space on the trigger: Opens the popover, focus on its first control
Tab, Shift+Tab: Move through the popover. Leaving it closes it and continues in page order after the trigger
Escape: Closes it, focus back on the trigger

Accessibility

role dialog without aria-modal. Aria-labelledby its title or an aria-label naming the object, such as Interview with Sunita Rai
Trigger: aria-haspopup dialog, aria-expanded, aria-controls
Focus moves in on open and back to the trigger on Escape. The popover itself takes tabindex -1 when it has no control
Nothing the task depends on lives only in a popover
One popover or menu open at a time. Escape closes the front layer first

Content

A title of a few words, the details, one or two actions
The content may end with one link to the full record, which opens in the same tab
No warnings

Tokens

--layer-popover
--glass-fill-raised
--glass-highlight
--glass-ring-raised
--elevation-3
--surface-1
--radius-xl
--space-2
--space-3
--type-nav
--type-small
--text
--duration-fast
--ease-soft
--ease-standard

JSON

{
  "title": "Popover",
  "path": "/components/popover",
  "url": "https://design.werklist.com/components/popover",
  "text": "https://design.werklist.com/agent/components/popover",
  "summary": "A popover shows a few controls or details for one item beside the control that opened it, and the page stays usable.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Popover",
  "purpose": "A non modal layer anchored to its trigger that holds a few controls or details for one item.",
  "use": [
    "A small task on one item, such as rescheduling an interview or logging a call with a candidate",
    "Details of one item that people glance at and close",
    "A short form tied to a row, on wide screens"
  ],
  "avoid": [
    "A name or a shortcut: use a tooltip",
    "A list of commands: use a menu",
    "A decision that must come first: use a dialog",
    "A warning: use a dialog or an inline message",
    "A popover opened from a popover",
    "Opening on hover: a popover opens on a click or a key"
  ],
  "anatomy": [
    {
      "part": "Layer",
      "measure": "above the page",
      "token": "--layer-popover"
    },
    {
      "part": "Width",
      "measure": "from the trigger's width to 404 px, and at most the window width less 16 px"
    },
    {
      "part": "Padding",
      "measure": "12 px",
      "token": "--space-3"
    },
    {
      "part": "Radius",
      "measure": "12 px",
      "token": "--radius-xl"
    },
    {
      "part": "Title, optional",
      "measure": "14 px on 20 px, weight 500",
      "token": "--type-nav, --text"
    },
    {
      "part": "Body text",
      "measure": "14 px on 22 px",
      "token": "--type-small, --text"
    },
    {
      "part": "Buttons",
      "measure": "36 px high, 44 px on touch screens"
    },
    {
      "part": "Gap to the trigger",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "Window margin",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "Placement",
      "measure": "below the trigger with the start edges aligned, or the end edges for a trigger at the end of a row. Upward when less than 280 px remain below and there is more room above. Never over its own trigger"
    },
    {
      "part": "Maximum height",
      "measure": "70 percent of the window, or the room on its side when that is less. The content scrolls on its own"
    },
    {
      "part": "Surface with a mouse",
      "measure": "raised fill and shadow. In the dark theme a 1 px top highlight and a 0.5 px ring",
      "token": "--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised"
    },
    {
      "part": "Surface on a touch screen",
      "measure": "opaque, no blur",
      "token": "--surface-1"
    }
  ],
  "variants": [
    {
      "name": "Anchored",
      "use": "Wide screens and details on phones"
    },
    {
      "name": "As a bottom sheet",
      "use": "A popover that holds a form or more than one control, on a touch screen below 640 px"
    }
  ],
  "states": [
    {
      "name": "Opening",
      "change": "Fades in over 150 ms, moving 4 px away from the trigger and growing from 98 percent",
      "tokens": [
        "--duration-fast",
        "--ease-soft"
      ]
    },
    {
      "name": "Closing",
      "change": "Reverse over 150 ms",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "Reduced motion",
      "change": "Opacity only",
      "tokens": [
        "--duration-fast"
      ]
    },
    {
      "name": "Trigger open",
      "change": "aria-expanded true on the trigger"
    }
  ],
  "keys": [
    {
      "key": "Enter or Space on the trigger",
      "action": "Opens the popover, focus on its first control"
    },
    {
      "key": "Tab, Shift+Tab",
      "action": "Move through the popover. Leaving it closes it and continues in page order after the trigger"
    },
    {
      "key": "Escape",
      "action": "Closes it, focus back on the trigger"
    }
  ],
  "accessibility": [
    "role dialog without aria-modal. Aria-labelledby its title or an aria-label naming the object, such as Interview with Sunita Rai",
    "Trigger: aria-haspopup dialog, aria-expanded, aria-controls",
    "Focus moves in on open and back to the trigger on Escape. The popover itself takes tabindex -1 when it has no control",
    "Nothing the task depends on lives only in a popover",
    "One popover or menu open at a time. Escape closes the front layer first"
  ],
  "content": [
    "A title of a few words, the details, one or two actions",
    "The content may end with one link to the full record, which opens in the same tab",
    "No warnings"
  ],
  "tokens": [
    "--layer-popover",
    "--glass-fill-raised",
    "--glass-highlight",
    "--glass-ring-raised",
    "--elevation-3",
    "--surface-1",
    "--radius-xl",
    "--space-2",
    "--space-3",
    "--type-nav",
    "--type-small",
    "--text",
    "--duration-fast",
    "--ease-soft",
    "--ease-standard"
  ]
}

Raw file: https://design.werklist.com/agent/components/popover