Bootstrap 4 Popover
Bootstrap 4 Popover
المكون Popover يشبه تلميحات الأدوات ؛ إنه مربع منبثق يظهر عندما ينقر المستخدم على عنصر. الفرق هو أن العنصر المنبثق يمكن أن يحتوي على محتوى أكثر بكثير.
تبديل المنبثقةكيفية إنشاء Popover
لإنشاء نافذة منبثقة ، أضف data-toggle="popover"
السمة إلى عنصر.
استخدم titleالسمة لتحديد نص رأس النافذة المنبثقة ، واستخدم data-contentالسمة لتحديد النص الذي يجب عرضه داخل نص العنصر المنبثق:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
ملاحظة: يجب تهيئة العناصر المنبثقة باستخدام jQuery: حدد العنصر المحدد واستدعاء popover()الطريقة.
ستعمل الكود التالي على تمكين جميع العناصر المنبثقة في المستند:
مثال
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
تحديد المواقع Popovers
بشكل افتراضي ، ستظهر النافذة المنبثقة على الجانب الأيمن من العنصر.
استخدم data-placementالسمة لتعيين موضع العنصر المنبثق على الجانب العلوي أو السفلي أو الأيسر أو الأيمن من العنصر:
مثال
<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
بشكل افتراضي ، يتم إغلاق النافذة المنبثقة عند النقر فوق العنصر مرة أخرى. ومع ذلك ، يمكنك استخدام 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>
نصيحة: إذا كنت تريد عرض العنصر المنبثق عند تحريك مؤشر الماوس فوق العنصر ، فاستخدم data-triggerالسمة مع قيمة "hover":
مثال
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
استكمال مرجع Bootstrap Popover
للحصول على مرجع كامل لجميع الخيارات والأساليب والأحداث المنبثقة ، انتقل إلى مرجع Bootstrap JS Popover .