إنشاء تلميح أداة (Tooltip) باستخدام CSS: دليل المبتدئين الكامل

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

ما هو تلميح الأداة (Tooltip)؟

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

لماذا استخدام تلميحات CSS فقط؟

رغم أنه يمكن إنشاء التلميحات باستخدام مكتبات JavaScript، إلا أن استخدام CSS فقط يقدم عدة مزايا:

• خفيفة الوزن: لا حاجة لسكريبتات خارجية، مما يجعل موقعك أسرع.
• سهلة الوصول: سهلة الصيانة وتعمل حتى إذا كان JavaScript معطلاً.
• قابلة للتخصيص: يمكنك التحكم بسهولة في الألوان، الحركة، والموقع.

خطوة بخطوة: إنشاء تلميح أداة باستخدام CSS

1. كتابة هيكل HTML

ابدأ بعنصر span أو button يحتوي على رسالة التلميح باستخدام عنصر فرعي داخلي.

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">هذه هي رسالة التلميح!</span>
</div>

2. إضافة تنسيقات CSS الأساسية

لنقم بتنسيق حاوية التلميح وإخفاء نص التلميح افتراضيًا.

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

3. إظهار التلميح عند التحويم

الآن، اجعل التلميح يظهر عند تحويم المستخدم على العنصر.

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

4. إضافة السهم باستخدام العناصر الزائفة CSS

السهم الصغير أسفل مربع التلميح يضيف ارتباطًا بصريًا بالنص. يمكنك استخدام العنصر الزائف ::after لإنشائه.

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

5. اختياري: إضافة الحركة وتغيير الموضع

يمكنك تحريك التلميح أو تغيير موضعه (أعلى، يمين، أسفل، يسار) ليتناسب مع التصميم الخاص بك.

.tooltip .tooltip-text {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.tooltip:hover .tooltip-text {
  transform: translate(-50%, -5px);
}

مثال كامل عملي

<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -5px);
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}
</style>

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">يظهر هذا التلميح باستخدام CSS فقط!</span>
</div>

تطبيقات عملية للشركات

• التجارة الإلكترونية: استخدم التلميحات لشرح خيارات الشحن أو تفاصيل المنتج.
• لوحات تحكم البرمجيات: أضف نصوص مساعدة قصيرة عند التحويم لإرشاد المستخدمين عبر تحليلات أو تقارير معقدة.
• النماذج والاستبيانات: قدم تلميحات حول نوع البيانات التي يجب على المستخدمين إدخالها.
• المواقع التعليمية: حدد المصطلحات أو الاختصارات المهمة دون مقاطعة تدفق القراءة.

اعتبارات الوصولية وSEO

للحصول على أفضل النتائج، تأكد دائمًا أن تلميحاتك قابلة للوصول للمستخدمين باستخدام لوحة المفاتيح وقارئات الشاشة. استخدم خصائص aria-label أو title لتحسين الوصولية. يمكن لمحركات البحث أيضًا فهرسة التلميحات النصية أو SVG المضمنة، مما يوفر ميزة SEO بسيطة للصفحات الغنية بالسياق.

الخلاصة

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