Hover Card

Display

Rich content popover that appears when hovering a trigger element.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/hover-card

Instalação via CLI

$ npx kikitocn add hover-card

Exemplo de uso

Hover CardExample.tsx

import { HoverCard } from "@/components/ui/cn/hover-card/HoverCard";

export function HoverCardExample() {
  return (
    <HoverCard />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`content*`	`React.ReactNode`	—	Conteúdo do popover
`children*`	`React.ReactElement`	—	Elemento trigger
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Lado do popover
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alinhamento
`openDelay`	`number`	`300`	Atraso para abrir (ms)
`closeDelay`	`number`	`200`	Atraso para fechar (ms)
`className`	`string`	—	Classes CSS extras do popover

Carregando…