Carregando…Carregando…Carregando…Carregando…Hover-triggered card popover for showing preview content without a click.
Context Card — CSS-only hover popup with placement
Context Card
Rich popup with any custom content.
Opens to the right of the trigger element.
$ npx kikitocn add context-card@/lib/utilsimport { ContextCard } from "@/components/ui/cn/context-card/ContextCard";
export function ContextCardExample() {
return (
<ContextCard />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
trigger* | ReactNode | — | Elemento que aciona o card ao passar o mouse |
children* | ReactNode | — | Conteúdo do card popover |
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Posicionamento do card em relação ao trigger |
width | number | 280 | Largura do card em px |
delay | number | 200 | Delay em ms antes de exibir o card |