Bootstrap 4 Popover
ستتعلم في هذا الدرس عمل ال Popover وهو صندوق خافت مثل ال tooltips يظهر اعلي النصوص ليوضح معلومات اضافية وتفصيلية باستخدام ال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap 4 Popover
</> 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
