تلميح الأداة

تلميح ذو سطح فاتح مبني على React Aria - يفتح عند التمرير والتركيز، يتقلب ليبقى على الشاشة، يشير بعلامة نحو عنصر التشغيل، ويتلاشى ويتقلص من 0.9 عند الظهور والاختفاء. مرّر فوق أي من الأزرار أدناه.

المواضع

يمكن أن يجلس التلميح على أي جانب من عنصر تشغيله - اضبط placement الخاصية على Tooltip إلى top (الافتراضي)، bottom, left أو right. يدور علامة الإدراج وتحويل التلاشي ليتطابقا، وتقوم React Aria تلقائيًا بالتبديل إلى الجانب الآخر إذا لم تكن هناك مساحة كافية على الشاشة. مرّر المؤشر فوق الأزرار أدناه.

كل تلميح أداة يفتح بنفس الطريقة بغض النظر عن الجانب: تحوم بالمؤشر أو تُركّز لوحياً على TooltipTrigger. العنصر الفرعي الأول للمشغّل هو الشيء الذي تشير إليه (هنا الـ Button، مُغلَّف في Focusable لذا فإن <button> يصبح مشغّلاً صالحاً)، و Tooltip بجانبه هو ما يظهر. لذا فإن تلميح الأداة على اليسار هو مجرد placement="left" - لا يتغير شيء في التفاعل:

<TooltipTrigger delay={0}> <Focusable> <Button variant="secondary">Top</Button> </Focusable> <Tooltip placement="top">Top</Tooltip></TooltipTrigger>

التثبيت

يمكنك إضافة مكوّن تلميح الأداة هذا باستخدام CLI أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add tooltip

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

الأحجام

تأتي تلميحة الأداة بحجمين: sm (12px Caption 1، الافتراضي - يستخدمه مخطط المساهمات الحراري) و md (14px Body 1، مع حشو أوسع). بدّل بتغيير الـ size الخاصية على Tooltip - قارن بين صغير و متوسط المشغّلات في المعاينة أعلاه.

<Tooltip size="sm">12 contributions on April 26</Tooltip>

جدول المحتويات

تُبنى تلميحات الأداة على React Aria، لذا يجب أن يكون العنصر الفرعي الوحيد للمشغّل مكوّنًا قابلًا للتركيز (react-aria Button، أو أي شيء يستخدم useFocusable). يفتحه كلٌّ من التمرير بالمؤشر والتركيز بلوحة المفاتيح، Escape يغلقه، ويحصل المشغّل على aria-describedby مرتبط بالتلميح تلقائيًا. سنتناول المواضيع التالية:

  • تلميح أداة أساسي
  • الموضع والسهم الإرشادي
  • خصائص السهم والإزاحة
  • تأخير الفتح / الإغلاق
  • انتقال بالتمويه والتحجيم

للاستخدام الفعلي، مرّر المؤشر فوق المربعات في ContributionsCard - كل خلية هي TooltipTrigger يعرض تاريخه وعدده.