Hover Card | Bearnie

@bearnie

<HoverCard>
<HoverCardTrigger>
  <a href="#" class="text-sm font-medium underline underline-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">
        <CalendarDays 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

import HoverCard from "@/components/ui/hover-card/HoverCard.astro";
import HoverCardTrigger from "@/components/ui/hover-card/HoverCardTrigger.astro";
import HoverCardContent from "@/components/ui/hover-card/HoverCardContent.astro";

Usage

import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/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 underline underline-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 underline 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 underline 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 underline 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