البناء · جديد

التلميح

يشرح أيقونة أو مصطلحًا ببضع كلمات عند المرور بالمؤشر أو التركيز بلوحة المفاتيح.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/tooltip

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { DefinitionTooltip, IconTooltip, Tooltip } from "@/components/ui/tooltip";

<IconTooltip content="Fees apply to international transfers." />
<DefinitionTooltip content="International bank account number">IBAN</DefinitionTooltip>
<Tooltip content="Copy IBAN"><IconButton icon={CopyIcon} label="Copy IBAN" /></Tooltip>

أمثلة

الموضع والسهم

side أعلى أو أسفل أو بداية السطر أو نهايته (ينعكس في العربية)، وalign للبداية أو النهاية، وarrow={false} بلا سهم.

مرجع الخصائص

Tooltip

الخاصية	النوع	الافتراضي	الوصف
`content`	`ReactNode`		خاصية Text: جملة قصيرة واحدة، بلا روابط أو أزرار.
`children`	`ReactElement`		العنصر القابل للتركيز الذي يشرحه.
`side`	`"top" \| "bottom" \| "inline-start" \| "inline-end"`	`"top"`	خاصية Tooltip (الموضع).
`align`	`"start" \| "center" \| "end"`	`"center"`	‏Top left / Top right.
`arrow`	`boolean`	`true`	‏Top no arrow.
`delay / open / defaultOpen / onOpenChange`	`…`		التأخير والتحكم بالفتح.

IconTooltip / DefinitionTooltip

الخاصية	النوع	الوصف
`label`	`string`	اسم زر المعلومات؛ الافتراضي «مزيد من المعلومات».
`children`	`ReactNode`	للتعريف: المصطلح (IBAN، APR).
`…Tooltip props`	`…`	كما في Tooltip.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	التركيز على المشغّل يُظهر التلميح.
`Escape`	يخفي التلميح.

ARIA

المشغّل يحمل aria-describedby يشير إلى نسخة مخفية من النص موجودة دائمًا، فيُقرأ الوصف حتى والتلميح مغلق.
لا تضع فيه ما يحتاجه الشخص لإكمال المهمة، ولا تعتمد عليه في شاشات اللمس فقط.

ملاحظات العربية والاتجاه

ينعكس

inline-start وinline-end تنعكسان: «يسار» Figma يصبح يمينًا في العربية.
الفقاعة المنفصلة تحمل اتجاه الصفحة ولغتها.

لا ينعكس

أيقونة المعلومات لا تنعكس.

الأرقام: الأرقام في النص تتبع numerals عبر formatNumber.
الخط العربي: ‏body-12؛ السطر العربي أطول فتطول الفقاعة.
النص ثنائي الاتجاه: المصطلح اللاتيني مثل IBAN داخل جملة عربية يبقى سليمًا لأنه زر معزول.

كل المكونات ›