تنسيق التلميحات المرئية دائمًا: إنشاء صناديق معلومات مستمرة باستخدام CSS

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

لماذا نجعل التلميح مرئيًا دائمًا؟

في العديد من التطبيقات التجارية والتعليمية، لا ينبغي أن تختفي التلميحات. على سبيل المثال:

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

بدلاً من إجبار المستخدمين على التمرير بالفأرة، سنقوم بتعديل خصائص CSS مثل visibility وopacity لجعل التلميح مرئيًا دائمًا.

خطوة بخطوة: إنشاء تلميح مرئي دائمًا

1. البدء ببنية HTML الأساسية

إليك علامة بسيطة مشابهة للتلميحات التقليدية، لكننا سنعدل تنسيقها للحفاظ على عرضها بشكل دائم.

<div class="tooltip">
  تلميح مرئي دائمًا
  <span class="tooltip-text">هذه الرسالة مرئية بشكل دائم.</span>
</div>

2. تنسيق التلميح باستخدام CSS

سنضع التلميح نسبيًا بالنسبة للحاوية ونعطي نص التلميح خلفية ومؤشر سهم مصمم.

.tooltip {
  position: relative;
  display: inline-block;
  margin: 50px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.tooltip .tooltip-text {
  visibility: visible; /* اجعله مرئيًا دائمًا */
  opacity: 1;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  bottom: 125%; /* موضعه فوق العنصر */
  left: 50%;
  transform: translateX(-50%);
  transition: none; /* تعطيل تأثيرات المرور */
  z-index: 1;
}

/* السهم أسفل التلميح */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

3. اختياري: إضافة تنسيقات مختلفة لتوافق التصميم

يمكنك بسهولة تعديل هذا التلميح لاستخدامات مختلفة عبر موقعك بتغيير لون الخلفية، حجم الخط، أو الموضع.

.tooltip.success .tooltip-text {
  background-color: #28a745;
}

.tooltip.warning .tooltip-text {
  background-color: #ff9800;
}

.tooltip.info .tooltip-text {
  background-color: #007bff;
}

تساعد هذه التنويعات على تمييز التلميحات بصريًا للسياقات المختلفة — رسائل النجاح، التحذيرات، أو المعلومات المساعدة.

التطبيقات الواقعية

التلميحات المرئية دائمًا ليست للجمالية فقط — بل تخدم أغراض عملية في تجربة المستخدم والأعمال.

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

فوائد الوصولية

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

فوائد تحسين محركات البحث وتجربة المستخدم

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

فكرة متقدمة: تبديل رؤية التلميح باستخدام فئات CSS

إذا أردت وجود نسخ دائمة وأخرى تعتمد على المرور، يمكنك التبديل بينهما باستخدام فئة بسيطة. على سبيل المثال:

.tooltip-text.hidden {
  visibility: hidden;
  opacity: 0;
}

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

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

مثال على تلميح مرئي دائمًا كامل

<style>
.tooltip {
  position: relative;
  display: inline-block;
  margin: 40px;
}

.tooltip .tooltip-text {
  visibility: visible;
  opacity: 1;
  width: 200px;
  background-color: #444;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
}

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

<div class="tooltip">
  تلميح مرئي دائمًا
  <span class="tooltip-text">أنا هنا دائمًا للمساعدة — لا حاجة للتمرير!</span>
</div>

الخلاصة

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