Visão geral

O Popover é como um Dialog não-modal — abre próximo ao trigger e fecha ao clicar fora.

Demo

Import

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

Popover vs Dialog vs Tooltip

Popover: painel não-modal com conteúdo interativo (forms, filtros). Dialog: modal que bloqueia o fundo. Tooltip: texto simples de apoio no hover.

Padrão de implementação

Snippets para o Popover.

Popover básico

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Filtros</Button>
  </PopoverTrigger>
  <PopoverContent className="w-72" align="start">
    {/* conteúdo do popover */}
  </PopoverContent>
</Popover>

Com posicionamento

<PopoverContent
  side="bottom"     // top | bottom | left | right
  align="start"     // start | center | end
  sideOffset={8}    // distância do trigger
>
  ...
</PopoverContent>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter