إنشاء مكوِّن تلميح

نظرة عامة أساسية حول كيفية إنشاء عنصر مخصّص لتلميح متكيف مع الألوان ويمكن الوصول إليه.

في هذه المشاركة، أودّ مشاركة أفكاري حول كيفية إنشاء عنصر مخصّص <tool-tip> مُتكيّف مع الألوان ويمكن الوصول إليه. جرِّب العرض التوضيحي واطّلع على المصدر.

في ما يلي إصدار YouTube من هذه المشاركة إذا كنت تفضّل الفيديوهات:

نظرة عامة

التلميح هو عبارة عن تراكب غير تفاعلي غير مشروط لا يؤدي إلى حظر المحتوى ويحتوي على معلومات تكميلية لواجهات المستخدم. ويتم إخفاءه افتراضيًا ويتحول إلى إخفاء عند التمرير فوق أحد العناصر المرتبطة به أو التركيز عليه. لا يمكن تحديد تلميح أو التفاعل معه مباشرة. التلميحات الأدوات ليست بديلاً للتسميات أو المعلومات الأخرى العالية القيمة، ويجب أن يكون المستخدم قادرًا على إكمال مهمته بالكامل دون تلميح.

تلميح مقابل تلميح

كما هي الحال مع العديد من المكوّنات، تتوفّر أوصاف متفاوتة لماهية التلميح، على سبيل المثال، في MDN وWAI ARIA وSarah Higley وشاملة Components. أحب الفصل بين التلميحات ونصائح التبديل. يجب أن يحتوي التلميح على معلومات تكميلية غير تفاعلية، بينما يمكن أن يحتوي تلميح التبديل على التفاعل ومعلومات مهمة. السبب الرئيسي للانقسام هو سهولة الوصول، كيف يُتوقع من المستخدمين الانتقال إلى النافذة المنبثقة والوصول إلى المعلومات والأزرار بداخلها. تصبح التلميحات معقدة بسرعة.

في ما يلي فيديو لتلميح من موقع Designcember الإلكتروني، وهو عبارة عن طبقة تفاعلية يمكن للمستخدم تثبيتها لفتحها واستكشافها، ثم إغلاقها بمفتاح إطفاء أو مفتاح Escape:

لقد طرح تحدي واجهة المستخدم التصويرية هذا التلميح على شكل تلميح، ونسعى إلى تنفيذ كل شيء تقريبًا باستخدام CSS، وفي ما يلي طريقة إنشائه.

Markup

اخترتُ استخدام العنصر المخصّص <tool-tip>. لا يحتاج المؤلفون إلى إنشاء عناصر مخصصة في مكونات الويب إذا كانوا لا يريدون ذلك. سيتعامل المتصفِّح مع <foo-bar> تمامًا مثل <div>. يمكنك التفكير في عنصر مخصص مثل اسم فئة مع أقل خصوصية. لا تتضمن أي لغة JavaScript.

<tool-tip>A tooltip</tool-tip>

يشبه ذلك علامة div مع بعض النص بداخله. يمكننا الارتباط بشجرة تسهيل الاستخدام لقارئات الشاشة القادرة على الوصول من خلال إضافة [role="tooltip"].

<tool-tip role="tooltip">A tooltip</tool-tip>

والآن، بالنسبة إلى برامج قراءة الشاشة، يتم التعرّف عليها كتلميح. انظر في المثال التالي كيف أن عنصر الرابط الأول يشتمل على عنصر تلميح معروف في شجرته والعنصر الثاني لا يحتوي عليه؟ الموظف الثاني ليس له الدور. في قسم "الأنماط"، سنعمل على تحسين العرض التدرّجي للحساب.

بعد ذلك، نحتاج إلى أن لا يكون التلميح قابلاً للتركيز. في حال لم يفهم قارئ الشاشة دور التلميح، سيسمح للمستخدمين بالتركيز على <tool-tip> لقراءة المحتوى، ولن تحتاج تجربة المستخدم إلى ذلك. سوف تُلحق قارئات الشاشة المحتوى بالعنصر الرئيسي وبناءً على ذلك، لا تحتاج إلى التركيز لجعلها قابلة للوصول. يمكننا هنا استخدام inert لضمان عدم عثور أي مستخدم عن طريق الخطأ على محتوى التلميح هذا في مسار علامة التبويب:

<tool-tip inert role="tooltip">A tooltip</tool-tip>

اخترت بعد ذلك استخدام السمات كواجهة لتحديد موضع التلميح. ستفترض كل <tool-tip> تلقائيًا موضعًا "أعلى"، ولكن يمكن تخصيص الموضع على عنصر ما من خلال إضافة tip-position:

<tool-tip role="tooltip" tip-position="right ">A tooltip</tool-tip>

أميل إلى استخدام السمات بدلاً من الفئات لأشياء من هذا القبيل حتى لا يمكن تعيين مواضع متعددة لها في نفس الوقت <tool-tip>. يمكن أن يكون هناك عنصر واحد فقط أو لا شيء.

أخيرًا، ضَع عناصر <tool-tip> داخل العنصر الذي تريد تقديم تلميح بشأنه. أشارك هنا نص alt مع المستخدمين المبصرين من خلال وضع صورة و<tool-tip> داخل عنصر <picture>:

<picture>
  <img alt="The GUI Challenges skull logo" width="100" src="...">
  <tool-tip role="tooltip" tip-position="bottom">
    The <b>GUI Challenges</b> skull logo
  </tool-tip>
</picture>

أضع هنا <tool-tip> داخل عنصر <abbr>:

<p>
  The <abbr>HTML <tool-tip role="tooltip" tip-position="top">Hyper Text Markup Language</tool-tip></abbr> abbr element.
</p>

تسهيل الاستخدام

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

1. يمكنك إخفاء الرسائل التكميلية في المساحات المحدودة أو الواجهات المزدحمة.
2. عندما يمرر المستخدم مؤشر الماوس أو يركز أو يستخدم اللمس للتفاعل مع عنصر ما، فاكشف عن الرسالة.
3. عند انتهاء التمرير أو التركيز أو اللمس، يمكنك إخفاء الرسالة مرة أخرى.
4. أخيرًا، تأكد من تقليل أي حركة إذا حدد المستخدم تفضيلاً للحركة المنخفضة.

هدفنا هو إرسال رسائل تكميلية عند الطلب. يمكن لمستخدم ماوس مبصر أو لوحة مفاتيح تمرير مؤشر الماوس للكشف عن الرسالة وقراءتها بأعينه. يمكن لمستخدم غير مبصر التركيز على قراءة الرسالة وتلقّيها مسموعًا من خلال الأداة

تناولنا في القسم السابق شجرة تسهيل الاستخدام، ودور التلميح، وinrt، ويتبقى اختبارها والتأكّد من أنّ تجربة المستخدم تكشف عن رسالة التلميح للمستخدم بشكل مناسب. عند الاختبار، لم يتّضح لنا أي جزء من الرسالة المسموعة هو تلميح. يمكن رؤيته أثناء تصحيح الأخطاء في شجرة إمكانية الوصول أيضًا، يتم تشغيل نص الرابط "top" معًا، دون تردد، مع "انظر، تلميحات!". لا يقوم قارئ الشاشة بتقسيم النص أو تحديده كمحتوى تلميح.

يمكنك إضافة عنصر زائف لقارئ الشاشة فقط إلى <tool-tip> ويمكننا إضافة نص الطلب الخاص بنا للمستخدمين غير المبصرين.

&::before {
  content: "; Has tooltip: ";
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

يمكنك الاطّلاع أدناه على شجرة تسهيل الاستخدام المعدَّلة التي تحتوي الآن على فاصلة منقوطة بعد نص الرابط ومطالبة بالتلميح "تحتوي على تلميح: ".

الآن، عندما يركز مستخدم قارئ الشاشة على الرابط، فإنه يعرض "أعلى" ويتوقف مؤقتًا لمدة قصيرة، ثم يعلن "يحتوي على تلميح: انظر، تلميحات". يمنح هذا مستخدم قارئ الشاشة بعض تلميحات تجربة المستخدم الرائعة. يمنحك التردد فصلاً رائعًا بين نص الرابط وتلميح التلميح. بالإضافة إلى ذلك، عند الإعلان عن عبارة "يتضمّن تلميحًا"، يمكن لمستخدم قارئ الشاشة إلغاء النص بسهولة إذا كان قد سمعه من قبل. الأمر يذكّرك جدًا بالتمرير السريع وإلغاء التمرير بسرعة، لأن هذه الرسالة قد رأيتها من قبل. كان هذا بمثابة تكافؤ لطيف في تجربة المستخدم.

الأنماط

وسيكون العنصر <tool-tip> عنصرًا ثانويًا للعنصر الذي يمثّل رسالة تكميلية له، لذا لنبدأ أولاً بأساسيات التأثير المركّب. للخروج من الملف الشخصي للمستند باستخدام "position absolute":

tool-tip {
  position: absolute;
  z-index: 1;
}

إذا لم يكن العنصر الرئيسي سياقًا مكدسًا، سيضع التلميح نفسه في أقرب موضع في الواقع، وهذا ليس ما نريده. هناك أداة اختيار جديدة في الحظر يمكنها مساعدتك، :has():

:has(> tool-tip) {
  position: relative;
}

لا تقلق كثيرًا بشأن دعم المتصفح. أولاً، تذكر أن التلميحات هذه تكميلية. إذا لم تكن تعمل، فهذا أمر جيد. ثانيًا، في قسم JavaScript، سننشر نصًا برمجيًا لتعويض الوظائف التي نحتاجها للمتصفّحات التي لا تتوافق مع :has().

بعد ذلك، لنجعل التلميحات غير تفاعلية حتى لا تسرق أحداث المؤشر من العنصر الأصلي:

tool-tip {
  …
  pointer-events: none;
  user-select: none;
}

بعد ذلك، عليك إخفاء التلميح باستخدام ميزة "تعتيم" لنتمكّن من نقل التلميح باستخدام تلاشي متقاطع:

tool-tip {
  opacity: 0;
}

:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
}

يتولّى :is() و:has() المهام الصعبة هنا، ما يجعل عنصر tool-tip الذي يحتوي على العناصر الرئيسية على دراية بتفاعل المستخدمين من أجل تفعيل أو إيقاف خيار عرض تلميح ثانوي. يمكن لمستخدمي الماوس التمرير، ويمكن لمستخدمي لوحة المفاتيح وقارئ الشاشة التركيز، واللمس الذي يمكن للمستخدمين النقر عليه.

بعد أن أصبحت ميزة إظهار وإخفاء التراكب متاحة للمستخدمين المبصرين، حان الوقت لإضافة بعض الأنماط لضبط وضع التصاميم وتحديد موضعها وإضافة شكل المثلث إلى الفقاعة. تبدأ الأنماط التالية في استخدام خصائص مخصّصة، مبنية على المكان الذي وصلنا إليه، وأيضًا إضافة الظلال وأسلوب الخط والألوان لتبدو كتلميح عائم:

tool-tip {
  --_p-inline: 1.5ch;
  --_p-block: .75ch;
  --_triangle-size: 7px;
  --_bg: hsl(0 0% 20%);
  --_shadow-alpha: 50%;

  --_bottom-tip: conic-gradient(from -30deg at bottom, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) bottom / 100% 50% no-repeat;
  --_top-tip: conic-gradient(from 150deg at top, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) top / 100% 50% no-repeat;
  --_right-tip: conic-gradient(from -120deg at right, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
  --_left-tip: conic-gradient(from 60deg at left, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
  transition: opacity .2s ease, transform .2s ease;

  position: absolute;
  z-index: 1;
  inline-size: max-content;
  max-inline-size: 25ch;
  text-align: start;
  font-size: 1rem;
  font-weight: normal;
  line-height: normal;
  line-height: initial;
  padding: var(--_p-block) var(--_p-inline);
  margin: 0;
  border-radius: 5px;
  background: var(--_bg);
  color: CanvasText;
  will-change: filter;
  filter:
    drop-shadow(0 3px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
    drop-shadow(0 12px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
}

/* create a stacking context for elements with > tool-tips */
:has(> tool-tip) {
  position: relative;
}

/* when those parent elements have focus, hover, etc */
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
  transition-delay: 200ms;
}

/* prepend some prose for screen readers only */
tool-tip::before {
  content: "; Has tooltip: ";
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* tooltip shape is a pseudo element so we can cast a shadow */
tool-tip::after {
  content: "";
  background: var(--_bg);
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: var(--_tip);
}

/* top tooltip styles */
tool-tip:is(
  [tip-position="top"],
  [tip-position="block-start"],
  :not([tip-position]),
  [tip-position="bottom"],
  [tip-position="block-end"]
) {
  text-align: center;
}

تعديلات المظهر

يحتوي التلميح على بضعة ألوان فقط لإدارتها لأنّ لون النص يتم اكتسابه من الصفحة عبر الكلمة الرئيسية للنظام CanvasText. بالإضافة إلى ذلك، بما أننا أنشأنا خصائص مخصصة لتخزين القيم، يمكننا تحديث هذه الخصائص المخصصة فقط وترك المظهر على التعامل مع الباقي:

@media (prefers-color-scheme: light) {
  tool-tip {
    --_bg: white;
    --_shadow-alpha: 15%;
  }
}

بالنسبة إلى المظهر الفاتح، تتم مواءمة الخلفية مع اللون الأبيض، ونجعل الظلال أقل قوة من خلال ضبط مستوى تعتيمها.

من اليسار إلى اليمين

لإتاحة وضعَي القراءة من اليمين إلى اليسار، ستخزِّن السمة المخصّصة قيمة اتجاه المستند في القيمة -1 أو 1 على التوالي.

tool-tip {
  --isRTL: -1;
}

tool-tip:dir(rtl) {
  --isRTL: 1;
}

يمكن استخدام ذلك للمساعدة في تحديد موضع التلميح:

tool-tip[tip-position="top"]) {
  --_x: calc(50% * var(--isRTL));
}

بالإضافة إلى المساعدة في تحديد مكان المثلث:

tool-tip[tip-position="right"]::after {
  --_tip: var(--_left-tip);
}

tool-tip[tip-position="right"]:dir(rtl)::after {
  --_tip: var(--_right-tip);
}

وأخيرًا، يمكن أيضًا استخدامها للتحويلات المنطقية على translateX():

--_x: calc(var(--isRTL) * -3px * -1);

تحديد موضع التلميح

ضَع التلميح بشكل منطقي مع السمتَين inset-block أو inset-inline للتعامل مع موضعَي التلميح الفعلي والمنطقي. توضح التعليمة البرمجية التالية كيفية تصميم كل موضع من المواضع الأربعة لكل من الاتجاهين من اليسار إلى اليمين ومن اليمين إلى اليسار.

محاذاة لأعلى ومحاذاة بداية الحظر

tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position])) {
  inset-inline-start: 50%;
  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))::after {
  --_tip: var(--_bottom-tip);
  inset-block-end: calc(var(--_triangle-size) * -1);
  border-block-end: var(--_triangle-size) solid transparent;
}

المحاذاة لليمين مع المحاذاة المضمنة

tool-tip:is([tip-position="right"], [tip-position="inline-end"]) {
  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

tool-tip:is([tip-position="right"], [tip-position="inline-end"])::after {
  --_tip: var(--_left-tip);
  inset-inline-start: calc(var(--_triangle-size) * -1);
  border-inline-start: var(--_triangle-size) solid transparent;
}

tool-tip:is([tip-position="right"], [tip-position="inline-end"]):dir(rtl)::after {
  --_tip: var(--_right-tip);
}

المحاذاة لأسفل ونهاية الكتلة

tool-tip:is([tip-position="bottom"], [tip-position="block-end"]) {
  inset-inline-start: 50%;
  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

tool-tip:is([tip-position="bottom"], [tip-position="block-end"])::after {
  --_tip: var(--_top-tip);
  inset-block-start: calc(var(--_triangle-size) * -1);
  border-block-start: var(--_triangle-size) solid transparent;
}

محاذاة لليسار ومحاذاة البدء

tool-tip:is([tip-position="left"], [tip-position="inline-start"]) {
  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

tool-tip:is([tip-position="left"], [tip-position="inline-start"])::after {
  --_tip: var(--_right-tip);
  inset-inline-end: calc(var(--_triangle-size) * -1);
  border-inline-end: var(--_triangle-size) solid transparent;
}

tool-tip:is([tip-position="left"], [tip-position="inline-start"]):dir(rtl)::after {
  --_tip: var(--_left-tip);
}

Animation

حتى الآن، تم التبديل فقط بين إمكانية رؤية التلميح. في هذا القسم، سنقوم أولاً بتحريك التعتيم لجميع المستخدمين، لأنه انتقال آمن بشكل عام للحركة المخفضة. ثم سنقوم بتحريك موضع التحويل بحيث يظهر التلميح الانزلاق من العنصر الأصلي.

انتقال تلقائي آمن ومفيد

اختَر نمطًا لعنصر التلميح لنقل التعتيم والتحويل، كما يلي:

tool-tip {
  opacity: 0;
  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
  transition: opacity .2s ease, transform .2s ease;
}

:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
  transition-delay: 200ms;
}

إضافة حركة إلى الانتقال

يمكن أن يظهر تلميح على كل جانب من الجوانب، إذا كان المستخدم لا مانع من الحركة، ضَع خاصية translateX قليلاً من خلال منحها مسافة صغيرة للانتقال منها:

@media (prefers-reduced-motion: no-preference) {
  :has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_y: 3px;
  }

  :has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_x: -3px;
  }

  :has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_y: -3px;
  }

  :has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_x: 3px;
  }
}

لاحظ أن هذا يؤدي إلى ضبط الحالة "out" (خارج) لأن الحالة "in" هي عند translateX(0).

JavaScript

في رأيي، تعتبر JavaScript اختيارية. وذلك لأنه لن يُطلب منك قراءة أي من التلميحات هذه لإنجاز مهمة في واجهة المستخدم لديك. لذلك إذا فشلت تلميحات التلميحات تمامًا، فلن يكون الأمر كبيرًا. يعني هذا أيضًا أنه يمكننا التعامل مع التلميحات على أنها محسّنة تدريجيًا. في النهاية، ستتوافق كل المتصفحات مع :has() وقد يختفي هذا النص البرمجي تمامًا.

ينفّذ النص البرمجي polyfill تنفيذ إجراءين، ولا يحدث ذلك إلا إذا كان المتصفّح غير متوافق مع :has(). أولاً، عليك التأكّد من توفّر دعم :has():

if (!CSS.supports('selector(:has(*))')) {
  // do work
}

بعد ذلك، ابحث عن العناصر الرئيسية لـ <tool-tip> وامنحها اسم فئة للعمل عليها:

if (!CSS.supports('selector(:has(*))')) {
  document.querySelectorAll('tool-tip').forEach(tooltip =>
    tooltip.parentNode.classList.add('has_tool-tip'))
}

بعد ذلك، أدخِل مجموعة من الأنماط التي تستخدِم اسم الفئة هذا لمحاكاة أداة اختيار :has() للحصول على السلوك نفسه:

if (!CSS.supports('selector(:has(*))')) {
  document.querySelectorAll('tool-tip').forEach(tooltip =>
    tooltip.parentNode.classList.add('has_tool-tip'))

  let styles = document.createElement('style')
  styles.textContent = `
    .has_tool-tip {
      position: relative;
    }
    .has_tool-tip:is(:hover, :focus-visible, :active) > tool-tip {
      opacity: 1;
      transition-delay: 200ms;
    }
  `
  document.head.appendChild(styles)
}

انتهى الأمر، ستعرض جميع المتصفحات الآن التلميحات إذا لم يكن :has() متوافقًا.

الخلاصة

الآن بعد أن عرفت كيف فعلت ذلك، كيف يمكنك‽ 🙂، أتطلع فعلاً إلى popup واجهة برمجة التطبيقات لتسهيل التبديل، والطبقة العلوية بدون معارك z-index، وواجهة برمجة التطبيقات anchor لوضع الأشياء في النافذة بشكل أفضل. حتى ذلك الحين، سأقدم التلميحات.

دعونا ننويع أساليبنا ونتعلم جميع طرق الإنشاء على الويب.

يمكنك إنشاء عرض توضيحي وروابط تغريدات لي وسنضيفها إلى قسم الريمكسات في المنتدى أدناه.

ريمكسات من المنتدى

لا يتوفّر أي محتوى بعد.

المراجِع

• رمز المصدر على جيت هب