کارت هاور (Hover Card)

معرفی

کامپوننت HoverCard برای نمایش محتوا هنگام هاور روی یک المان استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای preview پروفایل کاربران (آواتار، نام، بیو) هنگام hover روی نام کاربری
• برای نمایش خلاصه محتوا (مثلاً preview لینک) بدون نیاز به کلیک
• برای نمایش اطلاعات تکمیلی غنی (تصویر + متن) که فراتر از یک Tooltip ساده است

چه زمانی استفاده نکنیم:

• برای اطلاعات ضروری که همیشه باید نمایش داده شوند
• در رابط‌های موبایل‌اول — HoverCard روی touch کار نمی‌کند
• وقتی کاربر باید با محتوا تعامل داشته باشد — از Popover استفاده کنید

استفاده

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@parto-system-design/ui'
import { Avatar, AvatarFallback, AvatarImage } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <HoverCard>
      <HoverCardTrigger>@کاربر</HoverCardTrigger>
      <HoverCardContent>
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage src="/avatar.jpg" />
            <AvatarFallback>ک</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="font-semibold">نام کاربر</h4>
            <p className="text-sm">توضیحات کاربر</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

حالت‌ها و انواع

پیش‌فرض

راهنمای استفاده

جدول ویژگی‌ها

HoverCard

HoverCardContent

دسترسی‌پذیری

• محتوای HoverCard برای کاربران صفحه‌خوان با focus روی trigger قابل دسترسی است
• با Escape بسته می‌شود
• مناسب برای محتوای preview — برای اکشن‌های مهم از Popover استفاده کنید

کامپوننت‌های مرتبط

• Tooltip — وقتی فقط یک خط متن ساده برای hover نیاز دارید (بدون تصویر یا ساختار غنی)
• Popover — وقتی محتوا تعاملی است و کاربر باید روی آن کلیک کند (نه فقط hover)