Hover Card | Bearnie

@bearnie

<HoverCard>
  <HoverCardTrigger>
    <a href="#" class="text-sm font-medium TextUnderlineIcon TextUnderlineIcon-offset-4">@bearnie</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div class="flex justify-between space-x-4">
      <Avatar>
        <AvatarImage src="/images/avatars/mike.png" />
        <AvatarFallback>WN</AvatarFallback>
      </Avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">@bearnie</h4>
        <p class="text-sm text-muted-foreground">
          The Astro component library for building beautiful interfaces.
        </p>
        <div class="flex items-center pt-2">
          <HugeIcon icon={Calendar04Icon} class="mr-2 size-4 opacity-70" />
          <span class="text-xs text-muted-foreground">Joined December 2024</span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Installation

npx bearnie add hover-card

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/bearnie/hover-card"

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    Content appears on hover
  </HoverCardContent>
</HoverCard>

Examples

Custom delay

Instant open

<HoverCard openDelay={0} closeDelay={500}>
  <HoverCardTrigger>
    <span class="text-sm font-medium TextUnderlineIcon TextUnderlineIcon-offset-4 cursor-pointer">Instant open</span>
  </HoverCardTrigger>
  <HoverCardContent>
    <p class="text-sm">Opens instantly, closes after 500ms delay.</p>
  </HoverCardContent>
</HoverCard>

Alignment

Start

Center

End

<div class="flex gap-8 justify-center">
  <HoverCard>
    <HoverCardTrigger>
      <span class="text-sm TextUnderlineIcon cursor-pointer">Start</span>
    </HoverCardTrigger>
    <HoverCardContent align="start" class="w-48">
      <p class="text-sm">Aligned to start</p>
    </HoverCardContent>
  </HoverCard>
  <HoverCard>
    <HoverCardTrigger>
      <span class="text-sm TextUnderlineIcon cursor-pointer">Center</span>
    </HoverCardTrigger>
    <HoverCardContent align="center" class="w-48">
      <p class="text-sm">Aligned to center</p>
    </HoverCardContent>
  </HoverCard>
  <HoverCard>
    <HoverCardTrigger>
      <span class="text-sm TextUnderlineIcon cursor-pointer">End</span>
    </HoverCardTrigger>
    <HoverCardContent align="end" class="w-48">
      <p class="text-sm">Aligned to end</p>
    </HoverCardContent>
  </HoverCard>
</div>

Props

Prop	Type	Default	Description
openDelay	number	200	Delay in ms before opening
closeDelay	number	300	Delay in ms before closing
class	string	-	Additional CSS classes

HoverCardContent

Prop	Type	Default	Description
align	“start” \| “center” \| “end”	“center”	Horizontal alignment
side	“top” \| “bottom”	“bottom”	Placement side
sideOffset	number	4	Offset from trigger
class	string	-	Additional CSS classes