CSS Tooltip
التلميحات في لغة CSS
سوف تتعلم في هذا الدرس علي كيفية إنشاء tooltip تلميح في لغة CSS لعنصر معين وهو نص مخفي يوضح معلومات إضافية حول العنصر ويظهر فقط عند تمرير مؤشر mouse علي العنصر.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
