Hover Card

نصب

pnpm dlx @simurgh-ui/cli add hover-card

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from '@simurgh-ui/react/hover-card';
import '@simurgh-ui/styles/hover-card.css';

Vue همین partها و Angular HoverCardComponent را صادر می‌کند.

پیش‌نمایش واقعی

Live component Hover Card ◆

Simurgh UI

استفاده

<HoverCard>
  <HoverCardTrigger>Simurgh UI</HoverCardTrigger>
  <HoverCardContent label="معرفی Simurgh UI">
    کامپوننت‌های دسترس‌پذیر برای Angular، React و Vue.
  </HoverCardContent>
</HoverCard>

رفتار و دسترس‌پذیری

Content با hover یا focus trigger ظاهر و هنگام خروج pointer یا focus بسته می‌شود. اطلاعات ضروری، action اصلی یا محتوای قابل‌تعامل پیچیده را فقط داخل Hover Card قرار ندهید؛ روی دستگاه لمسی hover قابل اتکا نیست.

Trigger باید بدون کارت نیز قابل‌فهم باشد و Content accessible label داشته باشد. نمایش و بستن نباید focus را جابه‌جا کند. برای محتوای تعاملی قابل‌بستن از Popover و برای توضیح بسیار کوتاه از Tooltip استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.