شرح صفوف ومحتوى الفقرة
خطوات إنشاء صندوق معلومات 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.
HTML
.text
{
position:absolute;
left:102%;
top:0px;
border:transparent solid 1px;
padding:5px;
color:white;
background:#555;
border-radius:5px;
}