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

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

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

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

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

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

خطوات إظهار صندوق معلومات 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)