Vox Mente
Navegação

Componentes

Popover

beta

Camada com conteúdo interativo, aberta no clique. Se é só texto curto de apoio, use Tooltip.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/popover

Playground
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Editar nome da turma
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Nome da turma</PopoverTitle>
      <PopoverDescription>Visível para professores e coordenação.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Uso

Abre no clique, não no hover. Aceita conteúdo interativo — é isso que distingue popover de tooltip.

Anatomia

`PopoverHeader` agrupa `PopoverTitle` e `PopoverDescription`. Nenhum dos dois é obrigatório — use o que o conteúdo pedir.

Posicionamento

`side` e `align` controlam onde o conteúdo abre em relação ao gatilho. O padrão é `side="bottom"` e `align="center"`.

Conteúdo interativo

Diferente do tooltip, o popover mantém o foco preso dentro do conteúdo — botões e links dentro dele funcionam normalmente.

Quando não usar

Texto curto e não interativo é tooltip, não popover. Conteúdo longo, com várias seções ou que precisa de foco total da tela, é dialog ou sheet — não force tudo dentro de um popover.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css