Blode UI
GitHub

Hover Card

Reveal contextual information when users hover or focus a trigger.

Loading
Loading...
import { Button } from "@/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 
export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger closeDelay={100} delay={10} render={<Button variant="link" />}>
        Hover Here
      </HoverCardTrigger>
      <HoverCardContent className="flex w-64 flex-col gap-0.5">
        <div className="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div className="mt-1 text-muted-foreground text-xs">Joined December 2021</div>
      </HoverCardContent>
    </HoverCard>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/hover-card"

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Additional details</HoverCardContent>
</HoverCard>