Popover

Components/Overlay and disclosure

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Standalone non-modal component with CDK Overlay/Portal, positioning, dismiss, and focus return.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Anatomy

Open popover 1 6

2

Popover title

3

Concise contextual content.

4

Cancel Confirm 5

1. Trigger — Button controlling open state and aria-expanded.
2. Panel — elevated surface with role="dialog".
3. Header — optional title and absolutely positioned close control.
4. Body — independent Content Text and Content Slot.
5. Actions — up to two independently replaceable and hideable Buttons.
6. Arrow — closed Shape pointing to the trigger.

Interactive example · Angular

Running with the native Angular component and @angular/cdk/overlay + portal + a11y.

Loading functional preview…

Open the Angular playground

Additional Content Slot · Angular

Executed by the native Angular component with CDK Overlay/Portal and content projection.

Loading functional preview…

Open this example in Angular

Placements

Modifier	Panel position
ds-popover--bottom	Below the trigger
ds-popover--top	Above the trigger
ds-popover--left	To the trigger's left
ds-popover--right	To the trigger's right

Token mapping

Part	Component tokens
Panel	component.popover.panel.{bg,border-color,border-width,gap,max-width,padding-x,padding-y,radius,shadow}.default
Title / Body	component.popover.title.color.default, component.popover.body.{color,gap,padding-bottom}.default
Close	component.popover.close.{size,icon-size,padding,color}.default, component.popover.close.icon.stroke-width.default
Content Slot	component.popover.content-slot.gap.default
Actions	component.popover.actions.{gap,padding-top}.default
Arrow	component.popover.arrow.{base,fill}.default

Usage

When to use

Use Popover when

Contextual content needs actions, links, a simple field, or richer guidance than a Tooltip without blocking the rest of the page.

Do not use Popover when

Content is only a short label (use Tooltip), requires a blocking decision or long flow (use Modal), or represents a command list (use Menu).

Related

Tooltip Menu Modal Button

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import {
  TisPopover,
  TisPopoverActions,
  TisPopoverContent,
} from '@tis/angular/popover'

Template

<tis-popover
  #popover
  title="Preferências do projeto"
  triggerLabel="Abrir preferências"
  placement="bottom"
>
  <div tisPopoverContent>Conteúdo contextual breve.</div>
  <div tisPopoverActions>
    <button type="button" (click)="popover.close('api')">Aplicar</button>
  </div>
</tis-popover>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/popover

Primitive

@angular/cdk/overlay + portal + a11y

Status

Beta

Accessibility

Accessibility and keyboard

Input	Behavior
Enter / Space	The Button trigger opens or closes through native click behavior.
Escape	Closes the Popover and returns focus to the trigger.
Tab	Follows natural order; there is no focus trap.
role="dialog"	Use aria-labelledby for a visible title or aria-label when there is no header.

Output responsibility

Preserve the non-modal dialog contract and validate Escape, outside interaction, ARIA relationships, and focus return.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference