انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: التلميحات في لغة CSS

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

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

1 صفوف تعليمية
لغة CSS
3,583 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

خطوات إنشاء زر 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)