انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 133
دورة لغة CSS

التلميحات في لغة CSSCSS Tooltip

سوف تتعلم في هذا الدرس علي كيفية إنشاء tooltip تلميح في لغة CSS لعنصر معين وهو نص مخفي يوضح معلومات إضافية حول العنصر ويظهر فقط عند تمرير مؤشر mouse علي العنصر.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,553
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

CSS Tooltip التلميحات في لغة CSS

تستخدم tooltip لإظهار معلومات معلومات إضافية حول العنصر للمستخدمين عند تمرير مؤشر الماوس فوق هذا العنصر, وعادة تستخدم جاهزة بمكتبات مبنية علي جافا سكريبت لكن بلغة CSS في الإصدارة الحديثة يمكن عمل tooltip بسهولة جداً.

CSS create tooltip button إنشاء زر tooltip في لغة CSS

خطوات إنشاء زر tooltip في لغة CSS:

  • يتم عمل block باسم tooltip ليحتوي علي جزئين الجزء الأول وهو زر tooltip والجزء الثاني وهو النص الذي سوف يظهر عند تمرير زر mouse.
  • يتم تحويل block من display:block وضعة الافتراضي الي display:inline-block حتي نتمكن من إضافة مجموعة من tooltip بجوار بعضها لبعض.
  • نقوم بتحويل tooltip إلي position: relative وإضافة padding:3px ثم تحويل cursor: pointer لتظهر علامة hand اعلي tooltip.
  • وأخيراً إضافة border-bottom بلون اسود وسمك 1px والنوع dotted لتصبح border-bottom:1px dotted black.
جرّب بنفسك

CSS create tooltip button

إنشاء زر tooltip في لغة CSS.

HTML 
.tooltip 
{
  position: relative;
  display: inline-block;
  padding:3px;
  cursor: pointer;
  border-bottom:1px dotted black;
}
جرّب بنفسك

CSS create tooltip box إنشاء صندوق المعلومات tooltip في لغة CSS

خطوات إنشاء صندوق معلومات tooltip في لغة CSS:

  • يتم عمل box باسم text ليحتوي علي نص يظهر فقط عند تمرير مؤشر mouse اعلي tooltip.
  • تحويل text إلي position والقيمة absolute لتصبح position:absolute.
  • يبدأ من أعلي بقيمة 0 عن طريق خاصية top:0 ويبدأ من اليسار بقيمة 102% اي انه يظهر بعد عنصر tooltip من جهة اليسار.
  • إضافة border شفاف بقيمة 1px وإضافة padding بقيمة 3px وإضافة لون أبيض مع border-radius بقيمة 5px لتدوير الإطار.
جرّب بنفسك

CSS create tooltip box

إنشاء صندوق معلومات tooltip في لغة CSS.

HTML 
.text
{
  position:absolute;
  left:102%;
  top:0px;
  border:transparent solid 1px;
  padding:5px;
  color:white;
  background:#555;
  border-radius:5px;
}
جرّب بنفسك

CSS tooltip hover إظهار صندوق المعلومات tooltip في لغة CSS

خطوات إظهار صندوق معلومات tooltip في لغة CSS:

  • يتم إخفاء صندوق المعلومات عن طريق خاصية display:none.
  • عمل hover علي عنصر tooltip عند تمرير مؤشر mouse يظهر صندوق text ويتحول من display:none الي display:block.
جرّب بنفسك

CSS tooltip hover

إظهار صندوق معلومات tooltip عند تمرير مؤشر mouse في لغة CSS.

HTML 
.tooltip:hover .text
{
  display:block;
}
جرّب بنفسك

CSS tooltip arrow سهم صندوق المعلومات tooltip في لغة CSS

يجب عمل border إطار شفاف من كل الجوانب عد الجانب الذي يشير إلي النص الموجود داخل عنصر tooltip.

جرّب بنفسك

CSS tooltip arrow

إظهار صندوق معلومات tooltip عند تمرير مؤشر mouse في لغة CSS.

HTML 
.tooltip .text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #555 transparent transparent;
}
جرّب بنفسك

CSS tooltip animation عمل مؤثر حركي مع tooltip في لغة CSS

يمكن أن يظهر صندوق tooltip بمؤثر حركي في لغة CSS عن طريق خاصية transition  وتحويل opacity من قيمة صفر لقيمة 1 ويجب استخدام خاصية visibility.

CSS tooltip animation

جرّب بنفسك

CSS tooltip animation

ظهور صندوق tooltip مع مؤثر حركي في لغة CSS.

HTML 
.text
{
  position:absolute;
  left:102%;
  top:0px;
  visibility: hidden;
  border:transparent solid 1px;
  padding:5px;
  color:white;
  background:black;
  border-radius:5px;
  opacity: 0;
  transition: opacity 3s;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات18

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 18 مفهومةأول بطاقة، أول خطوة
01 Tooltip تلميح
للمراجعة
02 Basic أساسي
للمراجعة
03 Positioning التمركز
للمراجعة
04 Arrows السهام
للمراجعة
05 Fade تضاؤل / تلاشي
للمراجعة
06 Class فئة
للمراجعة
07 Position موقع / وضعية
للمراجعة
08 Relative نسبي
للمراجعة
09 Radius منتصف القطر / الكوع الجانبي
للمراجعة
10 Border حد
للمراجعة
11 Hover يحوم
للمراجعة
12 Top أعلي
للمراجعة
13 Container حاوية المحتوي
للمراجعة
14 Padding حشو
للمراجعة
15 After بعد
للمراجعة
16 Content محتوي
للمراجعة
17 Transition تنقل
للمراجعة
18 Opacity مستوي الشفافية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

اي مما يلي يصف ال Tooltip ؟

02

غالبا ما تستخدم ال Tooltip عند قيام المستخدم ب .............

03

ما هو ال selector الذي يستخدم عادة في إضافة سهم لل tooltip عندما تظهر ؟