تشغيل البالونات بجافاسكريبت | البالونات المنبثقة Popovers في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تماماً مثل التلميحات، تعتمد البالونات المنبثقة على مكتبة Popper المدمجة داخل bootstrap.bundle.min.js وهي ميزة اختيارية التفعيل Opt-in حفاظاً على الأداء؛ لذا نفعّلها في جافاسكريبت القياسية بتمرير العناصر الحاملة للسمة data-bs-toggle="popover" إلى الباني new bootstrap.Popover(el).

إذا رغبت بتحديث محتوى بالون موجود ديناميكياً بعد تهيئته (كإظهار رصيد محفظة محدّث)، استخدم الدالة المخصّصة popover.setContent({ '.popover-header': '...', '.popover-body': '...' }) دون الحاجة لتدمير النسخة وإعادة إنشائها.

الصف 2 كود برمجي

HTML

<button type="button" class="btn btn-lg btn-danger"
  data-bs-toggle="popover"
  data-bs-title="Pricing Breakdown"
  data-bs-content="Includes SSL, backups, and CDN.">
  View Plan Info
</button>

جرّب بنفسك

الصف 3 ملاحظة هامة

Enabling Popovers in JS تشغيل البالونات بجافاسكريبت

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (البالونات المنبثقة Popovers في بوتستراب 5)