Hover Card

Rich preview on hover or focus.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@aspyn-io/kit";

User hover card

The dispatch pattern: hover a technician to see skills, shift, and contact.

<HoverCard>
  <HoverCardTrigger asChild>
    <button className="font-medium underline-offset-4 hover:underline">Eric Gray</button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-3">
      <Avatar><AvatarFallback>EG</AvatarFallback></Avatar>
      <div className="space-y-1">
        <p className="text-sm font-semibold">Eric Gray</p>
        <p className="text-xs text-muted-foreground">eric.gray@aspyn.io · Shift 7a–4p</p>
        <div className="flex gap-1 pt-1">
          <Badge variant="secondary">Termite</Badge>
          <Badge variant="secondary">Rodent</Badge>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Notes

HoverCard is mouse/keyboard-focus only and non-interactive on touch — keep content supplemental, never the only path to information.