Hover Card

pop x delay

Card that pops up on hover with content preview. From Bundui.

hovercardpopbundui

Hover Card

Rich preview on hover with delay.

Code

hover-card.tsx

/* Pure CSS — the group-hover transition needs no state, so this stays a
   server component. Add a delay with `transition-[opacity,transform] delay-150`. */
export function HoverCard({ trigger, title, body }: { trigger: React.ReactNode; title: string; body: string }) {
  return (
    <div className="group relative inline-block">
      {trigger}
      <div className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-48 -translate-x-1/2 scale-95 rounded-lg border border-border bg-card p-4 opacity-0 shadow-lg transition-all duration-200 group-hover:scale-100 group-hover:opacity-100">
        <h4 className="text-sm font-medium">{title}</h4>
        <p className="mt-1 text-xs text-muted-foreground">{body}</p>
      </div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Hover Card component and wire it to my accent.”