Tooltip

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function SaveHint() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" />}>المسودات</TooltipTrigger>
        <TooltipContent side="end" title="المسودات">يفتح المسودات المحفوظة.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

استخدم Tooltip لتسمية زر بأيقونة فقط أو لإضافة تلميح قصير لعنصر. اجعله جملة واحدة. فهو تلميح لمستخدمي الفأرة ولوحة المفاتيح المبصرين، وليس مكانًا للروابط أو الأزرار أو أي شيء يجب أن يقرأه الناس: فلا يعتمد عليه قارئ الشاشة ولا شاشات اللمس. وضع TooltipProvider حول التطبيق أو شريط الأدوات ليفتح التلميح الثاني فورًا أثناء انتقال المؤشر. ولعلامة الاستفهام التي تشرح تسمية استخدم TooltipHelp: فهي تفتح بالنقر واللمس أيضًا ويقرؤها قارئ الشاشة.

البنيةنسخ رابط العنوان

• الزر: العنصر الذي يصفه التلميح. أي زر أو رابط أو حقل.
• الفقاعة: عرضها 240px على الأكثر (و160px على الأقل)، وانحناؤها radius-xs وshadow-lg.
• العنوان (اختياري): بخط عريض فوق النص.
• السهم: الرأس بحجم 14px نحو العنصر. أوقفه بـ showArrow={false}.
• أيقونة المساعدة: TooltipHelp، زر علامة استفهام بحجم 20px يفتح الفقاعة نفسها بوصفها popover.

أمثلةنسخ رابط العنوان

النمطاننسخ رابط العنوان

قيمة tone إما light (أبيض) أو dark (التلميح المعكوس). وفي الوضع الداكن يتبادلان. مرّر على الأزرار أو ركّز عليها.

أيقونة المساعدةنسخ رابط العنوان

TooltipHelp بجانب تسمية. وهو زر حقيقي له اسم يفتح عند التمرير والتركيز والنقر واللمس، فيصل إلى النص مستخدمو لوحة المفاتيح واللمس وقارئ الشاشة.

السهم والعنوان والتعطيلنسخ رابط العنوان

يُفتح التلميح بالتمرير وبتركيز لوحة المفاتيح، ويُغلق عند فقدان التركيز أو بمفتاح Escape أو عند مغادرة المؤشر. القيمة showArrow={false} تُسقط السهم، وtitle يضيف سطرًا أول عريضًا للنص الأطول، وdisabled على Tooltip يوقفه مع إبقاء الزر.

RTLنسخ رابط العنوان

يقبل side القيمتين start وend إضافة إلى top وbottom. وهما جهتا النص، فيفتح end إلى اليسار في الصفحات العربية ويتبعه السهم. وalign="start" يحاذي الحافة اليمنى للعنصر في RTL.

إمكانية الوصولنسخ رابط العنوان

• التلميح لمستخدمي الفأرة ولوحة المفاتيح المبصرين (وتقول Base UI الشيء نفسه): فضع كل ما هو مهم في نص الصفحة. ويحتاج العنصر بأيقونة فقط إلى aria-label لأن التلميح لا يسمّيه.
• TooltipHelp عبارة عن popover، فيفتح أيضًا بالنقر وEnter واللمس، ويُعلَن بوصفه نافذة منبثقة بعنوانها ونصها، ويغلقه Escape. وله اسم (label).
• يفتح عند تركيز لوحة المفاتيح وعند التمرير، ويبقى مفتوحًا ما دام المؤشر على الفقاعة، ويغلقه Escape (WCAG 1.4.13: قابل للإغلاق وللتمرير ودائم).
• النص بنسبة 4.5:1 أو أفضل على النمطين، فاتحًا وداكنًا. وأيقونة المساعدة 3:1 أو أفضل على كل سطح ولها حلقة تركيز.
• تظهر الفقاعة بالتلاشي؛ ومع تقليل الحركة تظهر دون حركة.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• ترسم DGA الموضع بهامش مادي 14px لكل اتجاه. أما هنا فـ start وend منطقيتان، فتتبادلان بالعربية ويتبعهما السهم.
• ويفتح أيضًا عند تركيز لوحة المفاتيح. وتُبنى أيقونة المساعدة popover يفتح عند التمرير ليقرأها مستخدمو اللمس وقارئ الشاشة أيضًا؛ أما Figma فتعرض التمرير فقط.

التبايننسخ رابط العنوان