Popover

Componentes/Overlay e disclosure

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

Dialog contextual não modal, ancorado a um trigger, para conteúdo breve que pode incluir ações e componentes interativos.

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 · HTML/CSS/JS

Executado pelo runtime JavaScript estável ds-tis/popover.

Carregando preview funcional…

Abrir playground HTML/CSS/JS

Content Slot adicional · HTML/CSS/JS

Executado pelo runtime HTML/CSS/JavaScript estável com campo e ações reais do DS.

Carregando preview funcional…

Abrir este exemplo em HTML/CSS/JS

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

Implementação

Status

Estável

Distribuição

Pacote npm

Instalação

npm

npm install ds-tis

pnpm

pnpm add ds-tis

yarn

yarn add ds-tis

bun

bun add ds-tis

Importações

import 'ds-tis/css'
import { initPopovers } from 'ds-tis/popover'

initPopovers()

Markup

<div class="ds-popover ds-popover--bottom">
  <button class="ds-button ds-popover__trigger" type="button">Detalhes</button>
  <div class="ds-popover__panel" role="dialog" aria-labelledby="popover-title" hidden>
    <div class="ds-popover__header">
      <h2 class="ds-popover__title" id="popover-title">Detalhes</h2>
    </div>
    <button class="ds-popover__close" type="button" aria-label="Fechar popover">…</button>
    <div class="ds-popover__body">Conteúdo breve.</div>
  </div>
</div>

Contrato da implementação Web

Runtime público

O módulo ds-tis/popover é obrigatório para sincronizar ARIA, foco, Escape, click externo e lifecycle. O Popover é não modal e não prende o foco.

Eventos públicos: ds-popover-open e ds-popover-close.

import {
  initPopovers,
  destroyPopovers,
  openPopover,
  closePopover
} from 'ds-tis/popover';

initPopovers();
// destroyPopovers(root) ao desmontar / on unmount

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

Inicialize o runtime público após o render e destrua-o quando a view responsável for desmontada.

Evidência de validação

Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.

Abrir referência estável