Popover

Conteúdo ancorado num gatilho, sem bloquear a tela.

Playground

Lado

Alinhamento

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Detalhes</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Triangulação</PopoverTitle>
      <PopoverDescription>3 tipos de fonte cobrem este perfil.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Quando usar

✓Formulário mínimo ou detalhe ancorado num botão (filtro, calendário, info)

Evite quando

Lista de ações→ DropdownMenu
Só um rótulo no hover→ Tooltip — e lembre: se precisa de tooltip, talvez não esteja pronto
Decisão que exige atenção total→ Dialog
Vidro→ GlassPopoverContent dentro de Popover

Variantes e props

side, align, sideOffset (PopoverContent)

posicionamento do Base UI; padrão bottom/center/4

Estados

openclosed

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: dialog (não modal)
Teclado: Esc fecha; foco volta ao gatilho

Código

Partes: Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription

import

import { Popover, PopoverTrigger, PopoverContent, PopoverHeader } from "@/components/ui/popover";

Fonte: src/components/ui/popover.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: DropdownMenu, Tooltip, Dialog