شرح صفوف ومحتوى الفقرة
يتيح Bootstrap 5.3 تخصيص مظهر البالون المنبثق بدقة عبر متغيرات CSS الممرّرة داخل كلاس مخصص في data-bs-custom-class، مثل تلوين شريط الرأس عبر --bs-popover-header-bg و--bs-popover-header-color، وتعديل عرض البطاقة عبر --bs-popover-max-width، وتلوين الإطار عبر --bs-popover-border-color.
ولإظهار بالون تفسيري فوق زر معطّل disabled، نطبّق نفس قاعدة الغلاف القابل للتركيز <span class="d-inline-block" tabindex="0"> مع ضبط data-bs-trigger="hover focus" حتى لا يشعر المستخدم بأنه ينقر زراً معطلاً يستجيب للنقر!
جدول مرجعي لسمات ومتغيرات البالونات (Popovers Reference)
| السمة / متغير CSS | الوظيفة | أفضل ممارسة عملية |
|---|---|---|
data-bs-toggle="popover" | تعريف العنصر كمطلق للبالون | يهيّأ برمجياً عبر new bootstrap.Popover(el) |
data-bs-title / content | عنوان الرأس ومتن الجسم | المحتوى الفارغ في الاثنين يمنع رسم البالون |
data-bs-trigger="focus" | الإغلاق عند النقر خارج البالون | استخدمه مع <a tabindex="0" role="button"> |
--bs-popover-header-bg | تلوين خلفية شريط عنوان البالون | مرّره عبر كلاس مخصص في data-bs-custom-class |
popover.setContent(...) | تحديث العنوان أو المتن برمجياً | يحدّث النصوص حياً دون إعادة إنشاء النسخة |
<style>
.custom-pop {
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-header-color: var(--bs-white);
}
</style>
<button type="button" class="btn btn-primary"
data-bs-toggle="popover" data-bs-custom-class="custom-pop"
data-bs-title="Themed"
data-bs-content="Clean CSS vars!">Open</button>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت التمييز العملي بين التلميحات والبالونات المنبثقة، وتفعيل البالونات بجافاسكريبت القياسية، وضبط حاويتها واتجاهاتها الأربعة، وتفعيل الإغلاق الذكي بالنقر الخارجي، وتلوينها بمتغيرات CSS. الخطوة التالية: في الدرس القادم ستتعلّم بناء الإشعارات العائمة غير الحاجبة Toasts لإظهار تنبيهات الحفظ والرسائل الفورية وتكديسها باحترافية.