تلميح
Tooltipتلميح متاح الوصول في React مبني على Radix يظهر عند مرور المؤشر والتركيز، مع مشغل HelpIcon ونمط بعنوان وأيقونة وسطح معكوس. جاهز للاتجاه العربي.
غلف المشغل بـ TooltipTrigger asChild، وضع الرسالة في TooltipContent. يجمع HelpIcon مشغل "?" جاهزاً مع تلميحه.
متى تستخدمه
استخدم Tooltip لتلميح قصير يوضح زر أيقونة أو تسمية حقل، مثل معنى رقم مرجعي. استخدم HelpIcon بجانب تسميات النماذج للحصول على مشغل "?" جاهز.
لا تضع التعليمات الأساسية في تلميح، لأنه مخفي افتراضياً وغير متاح باللمس. استخدم helperText في الحقل بدلاً منه.
أمثلة
الخصائص
الخصائص التي يعرفها Tooltip. سمات العنصر الأصلي تمر كما هي.
<Tooltip>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | ||
open | boolean | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
delayDuration | number | 700 | The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. |
disableHoverableContent | boolean | false | When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
<TooltipTrigger>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean |
<TooltipContent>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
inverted | boolean | Dark surface (gray-800) instead of the default light card. Mirrors SDGA Inverted. | |
title | react.ReactNode | Bold heading shown above the body text. | |
icon | react.ReactNode | Leading help badge: true renders the SDGA "?" help-circle, or pass your own node. | |
arrow | boolean | Show the beak pointing at the trigger. Defaults to true. | |
side | "top" | "right" | "bottom" | "left" | ||
sideOffset | number | ||
align | "center" | "start" | "end" | ||
alignOffset | number | ||
arrowPadding | number | ||
avoidCollisions | boolean | ||
collisionBoundary | Element | Element[] | ||
collisionPadding | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | ||
sticky | "always" | "partial" | ||
hideWhenDetached | boolean | ||
updatePositionStrategy | "always" | "optimized" | ||
forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | |
aria-label | string | A more descriptive label for accessibility purpose | |
onEscapeKeyDown | (event: KeyboardEvent) => void | Event handler called when the escape key is down. Can be prevented. | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | Event handler called when the a pointerdown event happens outside of the Tooltip.
Can be prevented. |
إمكانية الوصول
يظهر التلميح عند مرور المؤشر وعند التركيز بلوحة المفاتيح، ويغلقه مفتاح Escape. يربط Radix المحتوى بالمشغل، لذا يقرأ قارئ الشاشة التلميح عند التركيز على المشغل.
يجب أن يكون المشغل نفسه قابلاً للتركيز، لذا غلف زراً أو رابطاً بـ TooltipTrigger asChild. أبق النص قصيراً، لأن التلميحات لا تناسب الفقرات.