Hover Card

A floating card that appears on hover. Built on Radix HoverCard — great for user profiles and preview tooltips.

Import

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "poyraz-ui/molecules";

User Profile

Hover to show a user profile card.

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@poyrazavsever</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="https://github.com/poyrazavsever.png" />
        <AvatarFallback>PA</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">@poyrazavsever</h4>
        <p className="text-sm text-slate-500">
          Creator of Poyraz UI.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>