تلميح الأدوات
ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.
تسمية قصيرة لزر أيقونة أو لعلامة في رسم بياني، عند التمرير والتركيز. الملف js/tooltip.js (initTooltips()).
CSS: css/components/tooltip.css. الأصناف: .al-tooltip.
البنية
<button class="al-button al-button--icon" aria-label="Copy link" data-al-tip="Copy link|to this offer">…</button>
<span class="al-chart__bar" data-series="1" tabindex="0" role="img" aria-label="£120,900 Offer A, Year 1" data-al-tip="£120,900|Offer A, Year 1"></span>
value|what: يُعرض الجزء الذي قبل | بخط عريض.
الأنواع والأحجام
نوع واحد.
الحالات
يظهر عند التمرير والتركيز؛ فوق هدفه، وينقلب إلى أسفله إن لم يتسع المكان. ويبقى ما دام المؤشر فوق الهدف أو فوق التلميح، ولمدة 300ms أثناء انتقاله بينهما، فيمكن التمرير فوقه (WCAG 1.4.13). ويتبع هدفه أثناء تمرير الصفحة، ويختفي حين يخرج الهدف من العرض.
لوحة المفاتيح
يظهر عند التركيز؛ ومفتاح Escape يخفيه.
ARIA
لا يكون أبدًا المصدر الوحيد للاسم: فللعنصر aria-label خاص به؛ والتلميح يكرره بصريًا. وما دام ظاهرًا، يُضاف معرّفه إلى aria-describedby الخاص بالهدف (ويُزال بعده)، مع الإبقاء على أي وصف موجود مسبقًا؛ وإن كان اسم الهدف يقول الشيء نفسه (علامة رسم بياني)، فلا يُضاف. استدعِ initTooltips() مرة واحدة؛ واستدعاؤها مرة أخرى لا يفعل شيئًا.
من اليمين إلى اليسار
النص باتجاه الصفحة؛ والأرقام معزولة.
افعل ولا تفعل
- استخدمه لأزرار الأيقونة وحدها ولعلامات الرسوم البيانية.
- وضع أي شيء ضروري أو تفاعلي في تلميح أدوات؛ بل استخدم الطيّ.
الرموز
الرموز التي يستخدمها (9)
--al-color-inverse، --al-color-on-inverse، --al-leading-ui، --al-radius-sm، --al-space-1-5، --al-space-2، --al-text-sm، --al-weight-semibold، --al-z-toast