Bootstrap

Bootstrap 4 Tooltip

ستتعلم في هذا الدرس عمل ال Tooltip وهو صندوق خافت يظهر علي النصوص ليوضح معلومات اضافية باستخدام ال Bootstrap 

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1109

المواضيع

6
الشروحات chevron_left Bootstrap 4 Tooltip chevron_left Bootstrap

Bootstrap 4 Tooltip

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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

في الوضع الافتراضي يظهر ال Tooltip من اعلي ال Element يمكنك تغيير وضعية اظهار ال Tooltips من اي اتجاه باستخدام ال data-placement attribute ونكتب بداخل ال value اي من القيم التالية top, bottom, left, right

تقوم بأظهار تلميح عندما يقوم المستخدم بتحريك الماوس علي احد العناصر


<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".

معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات