Hover Card

Card com conteúdo rico exibido ao passar o mouse sobre um elemento.

Uso

<script setup lang="ts">
import { HoverCard, Avatar } from '@halfbyte/maka'
</script>

<template>
  <HoverCard>
    <template #trigger>
      <a href="#">@halfbyte</a>
    </template>

    <div>
      <Avatar name="HalfByte" size="md" />
      <p><strong>HalfByte</strong></p>
      <p>Design system criado para produtos modernos.</p>
    </div>
  </HoverCard>
</template>

Props

Prop	Tipo	Padrão
openDelay	number	700
closeDelay	number	300
placement	"top" | "bottom" | "left" | "right" | "top-start" | "bottom-end"	"bottom"
open	boolean	—

Slots

Slot	Descrição
trigger	Elemento que ativa o hover card
default	Conteúdo do card

Events

Evento	Payload	Descrição
update:open	boolean	Emitido ao abrir/fechar