Hover Card

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@sigil-ui/components";

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/profile">@kevin</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="font-semibold">Kevin Liu</p>
    <p className="text-sm text-[var(--s-text-muted)]">Design engineer</p>
  </HoverCardContent>
</HoverCard>

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/user/42">Priya Laghari</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <Stack direction="row" gap={12} align="center">
      <img src="/jane.jpg" alt="" className="size-10 rounded-full" />
      <Stack gap={4}>
        <p className="font-semibold">Priya Laghari</p>
        <p className="text-sm text-[var(--s-text-muted)]">Joined March 2024</p>
      </Stack>
    </Stack>
  </HoverCardContent>
</HoverCard>

<HoverCard openDelay={300} closeDelay={100}>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>Delayed open, fast close.</HoverCardContent>
</HoverCard>