Hover Card

---
import { buttonVariants } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
---

<HoverCard>
  <HoverCardTrigger class={buttonVariants({ variant: "link" })}>
    @nextjs
  </HoverCardTrigger>
  <HoverCardContent class="w-80">
    <div class="flex justify-between gap-4">
      <div class="flex flex-col gap-1">
        <h4 class="text-sm font-semibold">@nextjs</h4>
        <p class="text-muted-foreground text-sm">
          The React Framework created and maintained by Vercel.
        </p>
        <div class="text-muted-foreground text-xs">Joined December 2021</div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

---
import { buttonVariants } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
---

<div class="flex flex-wrap gap-3">
  <HoverCard>
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Bottom
    </HoverCardTrigger>
    <HoverCardContent side="bottom">Bottom aligned preview.</HoverCardContent>
  </HoverCard>

  <HoverCard side="right">
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Right
    </HoverCardTrigger>
    <HoverCardContent side="right">Right side preview.</HoverCardContent>
  </HoverCard>
  <HoverCard side="left">
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Left
    </HoverCardTrigger>
    <HoverCardContent side="left">Left side preview.</HoverCardContent>
  </HoverCard>
</div>