Popover

Componentes/Overlay e disclosure

ImplementaçãoHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Componente standalone não modal com CDK Overlay/Portal, posicionamento, dismiss e retorno de foco.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Anatomia

Abrir popover 1 6

2

Título do Popover

3

Conteúdo contextual breve.

4

Cancelar Confirmar 5

1. Trigger — Button que controla abertura e aria-expanded.
2. Panel — superfície elevada com role="dialog".
3. Header — title opcional e close absoluto.
4. Body — Content Text e Content Slot independentes.
5. Actions — até dois Buttons substituíveis e ocultáveis separadamente.
6. Arrow — Shape fechada que aponta para o trigger.

Exemplo interativo · Angular

Executado pelo componente Angular nativo com @angular/cdk/overlay + portal + a11y.

Carregando preview funcional…

Abrir playground Angular

Content Slot adicional · Angular

Executado pelo componente Angular nativo com CDK Overlay/Portal e content projection.

Carregando preview funcional…

Abrir este exemplo em Angular

Placements

Modifier	Posição do panel
ds-popover--bottom	Abaixo do trigger
ds-popover--top	Acima do trigger
ds-popover--left	À esquerda do trigger
ds-popover--right	À direita do trigger

Mapeamento de tokens

Parte	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

Uso

Quando usar

Use Popover quando

O conteúdo contextual precisa de ações, links, um campo simples ou explicação mais rica que Tooltip, sem bloquear o restante da página.

Não use Popover quando

O conteúdo é somente um label curto (use Tooltip), exige decisão bloqueante ou fluxo longo (use Modal), ou representa uma lista de comandos (use Menu).

Relacionados

Tooltip Menu Modal Button

Quando escolher esta saída

Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

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

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

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>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/popover

Primitive

@angular/cdk/overlay + portal + a11y

Status

Beta

Acessibilidade

Acessibilidade e teclado

Entrada	Comportamento
Enter / Space	O Button trigger abre ou fecha pelo comportamento nativo de click.
Escape	Fecha o Popover e retorna foco ao trigger.
Tab	Segue a ordem natural; não há focus trap.
role="dialog"	Use aria-labelledby para title visível ou aria-label quando não houver header.

Responsabilidade da saída

Preserve o contrato de dialog não modal e valide Escape, interação externa, relações ARIA e retorno de foco.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável