Bootstrap 4 Tooltip
ستتعلم في هذا الدرس عمل ال Tooltip وهو صندوق خافت يظهر علي النصوص ليوضح معلومات اضافية باستخدام ال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap 4 Tooltip
</> Bootstrap 4 Tooltip
ال Tooltip هو صندوق صغير يظهر للزوار عندما يقومون بتمرير ال mouse علي النصوص او اي HTML Elements
طريقة انشاء ال Tooltip
- قم باضافة ال data-toggle attribute متبوعاً ب tooltip value لاي Element
- قم باضافة ال title attribute متبوعاً ب النص الزي تريد اظهارة عند تمرير زر ال mouse بداخل ال value لنفس ال Element
- قم باضافة ال jquery method قبل نهاية ال bode close tg
<a href="#" data-toggle="tooltip" title="CloseTag">Hover over me</a>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</> Positioning Tooltips
تقوم بأظهار تلميح عندما يقوم المستخدم بتحريك الماوس علي احد العناصر
<a href="#" data-toggle="tooltip" data-placement="top" title="closetag.com">Hover</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="closetag.com">Hover</a> <a href="#" data-toggle="tooltip" data-placement="left" title="closetag.com">Hover</a> <a href="#" data-toggle="tooltip" data-placement="right" title="closetag.com">Hover</a>
Example
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
HTML: استخدم عنصر حاوية (مثل <div>) وأضف class التالي "tooltip" إليه. عندما يقوم المستخدم بتحريك الماوس فوق هذا <div> ، فإنه سيعرض نص tooltip. يتم وضع نص تلميح tooltip داخل عنصر (مثل <span>) مع class = "tooltiptext"
CSS: تستخدم tooltip ال class التالي position: relative ، وهو أمر ضروري لوضع نص تلميح tooltip (position: مطلق).
ملاحظة: نص ال Tooltip يكون مخفي افتراضيًا ، وسيكون مرئيًا عند تمرير المؤشر فوقه. لقد أضفنا أيضًا بعض الأنماط الأساسية إليها: عرض 120 بكسل ، ولون خلفية اسود، ولون نص أبيض ، ونص متوسط ، و padding علوي وسفلي 5 بكسل.
تُستخدم خاصية CSS border-radius لإضافة زوايا مستديرة إلى نص تلميح tooltip . يتم استخدام hover: لإظهار نص تلميح tooltip عندما يحرك المستخدم الماوس فوق <div> مع class = "tooltip".
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
