CSS

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

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

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1513

المواضيع

24
الشروحات chevron_left CSS Tooltip chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

.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.

.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.

.tooltip:hover .text
{
  display:block;
}

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

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

CSS tooltip arrow

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

.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

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

.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;
}
مصطلحات الدرس
Tooltip
Tooltip

تلميح

Basic
Basic

أساسي

Positioning
Positioning

التمركز

Arrows
Arrows

السهام

Fade
Fade

تضاؤل / تلاشي

Class
Class

فئة

Position
Position

موقع / وضعية

Relative
Relative

نسبي

Radius
Radius

منتصف القطر / الكوع الجانبي

Hover
Hover

يحوم

Top
Top

أعلي

Container
Container

حاوية المحتوي

After
After

بعد

Content
Content

محتوي

Opacity
Opacity

مستوي الشفافية

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.