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

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

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

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

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

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

يجب عمل 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)