Bootstrap Popover Plugin
البرنامج المساعد Popover
المكون الإضافي Popover يشبه تلميحات الأدوات ؛ إنه مربع منبثق يظهر عندما ينقر المستخدم على عنصر. الفرق هو أن العنصر المنبثق يمكن أن يحتوي على محتوى أكثر بكثير.
نصيحة: يمكن تضمين الإضافات بشكل فردي (باستخدام ملف "popover.js" الفردي في Bootstrap) ، أو كلها مرة واحدة (باستخدام "bootstrap.js" أو "bootstrap.min.js").
كيفية إنشاء 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 .