Capítulo 48 de 108

Popover

Core Idea

Exibe conteúdo rico em um portal, disparado por um botão/trigger. Diferente de Dialog, não bloqueia interação com o resto da página nem exige modalidade. Built on Base UI Popover.

Key Concepts

  • PopoverHeader / PopoverTitle / PopoverDescription: bloco semântico opcional para título+descrição dentro de PopoverContent.
  • align: "start" | "center" | "end" — alinhamento horizontal relativo ao trigger.
  • side: aceita lados físicos (left, top, bottom, right) e lógicos (inline-start, inline-end — este último respeita dir em RTL).

Code Examples

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Open Popover</PopoverTrigger>
  <PopoverContent className="w-64" align="start">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
    </PopoverHeader>
    <FieldGroup className="gap-4">
      <Field orientation="horizontal">
        <FieldLabel htmlFor="width" className="w-1/2">Width</FieldLabel>
        <Input id="width" defaultValue="100%" />
      </Field>
    </FieldGroup>
  </PopoverContent>
</Popover>
  • O que demonstra: popover com formulário estruturado via Field/FieldGroup/FieldLabel, align="start" fixando o painel à esquerda do trigger.

Reference Tables

Composição:

Popover
├── PopoverTrigger
└── PopoverContent

Key Takeaways

  1. side aceita valores lógicos (inline-start/inline-end) além dos físicos, preferíveis em layouts que suportam RTL.
  2. align controla o eixo perpendicular ao side (alinhamento horizontal quando o popover abre acima/abaixo).
  3. PopoverHeader/PopoverTitle/PopoverDescription são opcionais; PopoverContent sozinho aceita qualquer children livremente.
  4. Instalação manual requer npm install @base-ui/react.
  5. Popover é não-modal por padrão: clicar fora fecha, mas a página por trás continua interativa (diferente de Dialog).

Connects To

  • Dialog: use Dialog quando precisar bloquear a interação com o resto da página; Popover é para conteúdo contextual leve.
  • Field / FieldGroup: padrão recomendado para formulários compactos dentro do popover.
  • Tooltip: para texto informativo curto sem interatividade, prefira Tooltip a Popover.
AnteriorDrawerPróximoTooltip