Hover Card

마우스 호버 시 추가 정보를 보여주는 팝오버

Basic Usage

사용자가 요소 위에 마우스를 올리면 추가 정보를 표시합니다.

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@nextjs</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex justify-between space-x-4">
      <Avatar>
        <AvatarImage src="https://github.com/vercel.png" />
        <AvatarFallback>VC</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">@nextjs</h4>
        <p className="text-sm">
          The React Framework - created and maintained by @vercel.
        </p>
        <div className="flex items-center pt-2">
          <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
          <span className="text-xs text-muted-foreground">
            Joined December 2021
          </span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Simple Example

텍스트에 호버하여 간단한 설명을 표시할 수 있습니다.

React

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <span className="underline decoration-dotted cursor-help">
      React
    </span>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="text-sm">
      A JavaScript library for building user interfaces.
    </p>
  </HoverCardContent>
</HoverCard>

Usage

tsx

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from '@gpters-internal/ui';

function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover me</HoverCardTrigger>
      <HoverCardContent>
        Additional information here.
      </HoverCardContent>
    </HoverCard>
  );
}