تلميح

Tooltip

تلميح متاح الوصول في React مبني على Radix يظهر عند التمرير والتركيز، مع مشغّل HelpIcon ونمط بعنوان وأيقونة وسطح معكوس. جاهز للاتجاه العربي.

لف المشغل بـ TooltipTrigger asChild وضع الرسالة في TooltipContent. ويجمع HelpIcon مشغل "?" جاهزًا مع تلميحه.

متى تستخدمه

استخدم Tooltip لتلميح قصير يوضّح زر أيقونة أو تسمية حقل، مثل معنى رقم مرجعي. استخدم HelpIcon بجانب تسميات النماذج لمشغّل «?» جاهز.

لا تضع التعليمات الأساسية في تلميح؛ فهو مخفي افتراضيًا وغير متاح باللمس. استخدم helperText في الحقل بدلًا منه.

الآيبان

الخصائص التي يعرّفها 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.

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

الخاصية	النوع	الوصف
`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. أبقِ النص قصيرًا؛ فالتلميحات ليست للفقرات.