# ⛔️ Popover

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.popover.content"
  source="components/dist/registries/dskit.json#popover"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"popover"} activeTab={"content"} />

## Content guidelines

Popovers display richer contextual content than a tooltip. They appear on click and can contain formatted text, links, and actions. Use them when the information is too long or interactive for a tooltip.

### When to use

- To explain a concept or term inline, without leaving the current page.
- To show a small set of related actions in a compact overlay (also called an action popover).
- To provide definitions or help text for complex fields.
- Do not use popovers for critical error messages - use inline alerts or validation messages.

### Style

- Popover title: short noun phrase in sentence case. Optional but recommended for longer content.
- Body: plain prose, two to four sentences maximum.
- Avoid bullet lists inside popovers - keep content scannable through short sentences.
- Link text within a popover follows the same descriptive link text guidelines as inline links.

### Behavior

- Opens on click, closes on click outside or Escape.
- Do not open popovers on hover - use tooltips for hover-triggered content.
- Trap focus inside the popover while it is open for accessibility.

Object preview panels display a summary of an asset's key attributes without requiring full navigation to the detail page. They appear as side panels or overlays and are used to support quick inspection workflows.

### When to use

- When a user hovers over or clicks an item in a list or search result and wants a quick view of its properties.
- To reduce context switching during browsing or review tasks.

### Style

- Panel title is the asset name. Use the exact name - do not rephrase.
- Use short attribute labels (one to two words) followed by their values.
- Group related attributes under a subheading where the panel is long.
- Include a **View full details** link at the bottom to navigate to the full detail page.

### Attribute label examples

<DoDont pairs={[{ do: "Owner", dont: "Assigned owner" }, { do: "Last modified", dont: "Date of last modification" }, { do: "Type", dont: "Object type" }, { do: "Description", dont: "Asset description" }]} />