Bootstrap

Bootstrap 4 Popover

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

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1012

المواضيع

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

Bootstrap 4 Popover

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

Mostafa Hefny

CEO & Founder CloseTag

</> Bootstrap 4 Popover

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

طريقة انشاء ال Popover

  • قم بإضافة ال data-toggle attribute متبوعاً ب tooltip value لأي Element
  • قم بإضافة ال title attribute متبوعاً ب  النص الذي تريد إظهاره عند تمرير زر ال mouse  بداخل ال value لنفس ال Element 
  • قم بإضافة ال data-content attribute متبوعاً ب  النص الزي تريد إظهاره عند تمرير زر ال mouse  بداخل ال value لنفس ال Element 
  • قم بإضافة ال jquery method قبل نهاية ال bode close tg
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>

</> Positioning Popovers

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

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

ملاحظة: لا تعمل Popovers في الوضع الذي تتوقعه إذا لم تكن هناك مساحة كافية لها. على سبيل المثال: إذا كنت تستخدم الوضع العلوي في الجزء العلوي من الصفحة (حيث لا يوجد مكان لها) ، فسيتم بدلاً من ذلك عرض العنصر أسفل العنصر أو إلى اليمين (أينما كان له مكانًا مناسبًا ).

</> Closing Popovers

في الوضع الافتراضي ، يتم إغلاق النافذة Popover عند النقر فوق العنصر مرة أخرى ، يمكنك استخدام السمة data-trigger = focus التي ستغلق النافذة عند النقر خارج العنصر

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

ملاحظة: إذا كنت تريد عرض العنصر Popover عند تحريك مؤشر الماوس فوق العنصر ، فاستخدم  data-trigger attribute  بقيمة "hover":

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات