في هذا الدرس 5تصفّح المواضيع
بينما يكتفي التلميح Tooltip بسطر إرشادي عابر يظهر بمجرد مرور الفأرة، يقدّم البالون المنبثق Popover في Bootstrap 5.3 بطاقة معلوماتية عائمة مصغّرة تضم قسماً للعنوان .popover-header (عبر data-bs-title) وقسماً للمحتوى التفصيلي .popover-body (عبر data-bs-content)، وتُفتح افتراضياً بالنقر click بدلاً من المرور السريع.
يُعدّ البالون المنبثق الخيار المثالي لشرح صيغة احتساب ضريبة بجانب حقل سعر، أو عرض شروط كلمة المرور، أو تلخيص صلاحيات دور وظيفي دون مقاطعة سياق المستخدم بفتح نافذة حوارية كاملة Modal تحجب الشاشة.
تماماً مثل التلميحات، تعتمد البالونات المنبثقة على مكتبة Popper المدمجة داخل bootstrap.bundle.min.js وهي ميزة اختيارية التفعيل Opt-in حفاظاً على الأداء؛ لذا نفعّلها في جافاسكريبت القياسية بتمرير العناصر الحاملة للسمة data-bs-toggle="popover" إلى الباني new bootstrap.Popover(el).
إذا رغبت بتحديث محتوى بالون موجود ديناميكياً بعد تهيئته (كإظهار رصيد محفظة محدّث)، استخدم الدالة المخصّصة popover.setContent({ '.popover-header': '...', '.popover-body': '...' }) دون الحاجة لتدمير النسخة وإعادة إنشائها.
<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>يمكنك توجيه البالون في أربعة اتجاهات عبر السمة data-bs-placement بقيم top أو right (الافتراضي للبالون) أو bottom أو left، مع تكفّل محرك Popper بعكس الاتجاه تلقائياً عند الاقتراب من حواف نافذة المتصفح.
وعند إدراج زر البالون داخل مجموعة إدخال .input-group أو صف جدول قابل للتمرير الأفقي .table-responsive، احرص دائماً على تمرير data-bs-container="body" حتى لا يُحشر عنصر البالون داخل حدود الحاوية الضيقة أو يتشوه تنسيق الحقول المجاورة.
<button type="button" class="btn btn-secondary"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover">Top</button>
<button type="button" class="btn btn-secondary"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="Bottom popover">Bottom</button>السلوك الافتراضي للبالون المنبثق يتطلب من المستخدم النقر مرةً ثانية على نفس الزر لإغلاقه، وهو ما قد يربك الزائر المعتاد على إغلاق القوائم بمجرد النقر في أي فراغ بالصفحة! لحل ذلك رسمياً في Bootstrap 5، نستخدم نمط الإغلاق بالتركيز Dismiss on next click عبر إضافة data-bs-trigger="focus".
انتبه لشرط التوافق الجوهري عبر كافة المتصفحات (وخاصةً Safari على نظامي macOS وiOS): للحصول على إغلاق خارجي موثوق بسمة data-bs-trigger="focus"، استخدم وسم <a tabindex="0" role="button"> بدلاً من <button> حتى يطلق المتصفح حدث فقدان التركيز blur بشكل متسق عند النقر بعيداً.
<a tabindex="0" class="btn btn-warning" role="button"
data-bs-toggle="popover" data-bs-trigger="focus"
data-bs-title="Dismissible Popover"
data-bs-content="Click anywhere outside to close!">
Click Then Click Outside
</a>يتيح 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 لإظهار تنبيهات الحفظ والرسائل الفورية وتكديسها باحترافية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Popover Component البالون المنبثق (Popover)
- بطاقة معلوماتية عائمة تُفتح بالنقر وتضم شريط عنوان اختياري ومتناً تفصيلياً لشرح عناصر الواجهة دون حجب الشاشة.
- للمراجعة
- 02 Focus-Dismiss Trigger مشغّل الإغلاق بالتركيز
- ضبط السمة data-bs-trigger="focus" على رابط قابل للتركيز ليُغلق البالون تلقائياً فور نقر المستخدم في أي مساحة خارجية.
- للمراجعة
- 03 Container Scoping تحديد حاوية الإلحاق
- استخدام data-bs-container="body" لإلحاق عنصر البالون بجسم المستند منعاً لاقتصاصه داخل الجداول أو تشويه مجموعات الحقول.
- للمراجعة
- 04 Dynamic setContent API واجهة تحديث المحتوى الحية
- دالة برمجية في Bootstrap تحدّث نصوص عنوان ومتن البالون لحظياً دون الحاجة لإعادة تهيئة الكائن من الصفر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS أوراق الأنماط المتتالية
- Cascading Style Sheets
- توفّر متغيرات --bs-popover-* المحلية لتلوين رأس البالون وحدوده وعرضه الأقصى دون تعارض أنماط.
- للمراجعة
- 02 ARIA تطبيقات الإنترنت الغنية المتاحة
- Accessible Rich Internet Applications
- توفّر سمة role="button" على الروابط المشغّلة للبالون وتربط محتواه بقارئات الشاشة.
- للمراجعة
- 03 DOM نموذج كائن المستند
- Document Object Model
- شجرة عناصر الصفحة التي يُدرج فيها Bootstrap عنصر البالون عند الفتح ويزيله عند الإغلاق.
- للمراجعة
- 04 XSS البرمجة عبر المواقع
- Cross-Site Scripting
- مخاطر حقن السكربتات التي يصدّها معقّم Bootstrap تلقائياً داخل عنوان ومتن البالون.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
استخدم وسم <a tabindex="0" role="button"> مع data-bs-toggle="popover" وdata-bs-trigger="focus" وعنوان ومتن واضحين وفعّله بجافاسكريبت.
-
عرّف كلاس CSS يخصّص متغيرات خلفية الرأس ولون نصه ولون الإطار ثم اربطه بالبالون عبر data-bs-custom-class.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الحدث التفاعلي الافتراضي الذي يفتح البالون المنبثق Popover في Bootstrap 5 على خلاف التلميح؟
يُفتح البالون بالنقر افتراضياً ليتمكن المستخدم من قراءة العنوان والشرح التفصيلي بهدوء.
أي سمة تحدّد النص الرئيسي لجسم البالون (.popover-body) في Bootstrap 5؟
تملأ السمة data-bs-title رأس البالون بينما تملأ data-bs-content جسم البالون الرئيسي.
لضمان إغلاق البالون بالنقر الخارجي عبر كافة المتصفحات مع data-bs-trigger="focus"، أي عنصر يُنصح باستخدامه؟
يضمن استخدام الرابط القابل للتركيز إطلاق أحداث التركيز وفقدانه بانتظام على متصفحات Safari وChrome وFirefox.
البالون الذي تكون قيمتا data-bs-title وdata-bs-content فيه فارغتين يظهر كصندوق أبيض فارغ عند النقر.
يمتنع Bootstrap تماماً عن عرض البالون إذا خلا كل من العنوان والمحتوى من أي نص.
أي متغير CSS يغيّر لون خلفية شريط عنوان البالون في Bootstrap 5.3؟
يخصّص المتغير --bs-popover-header-bg لون خلفية شريط رأس البالون مباشرةً.
لماذا يُنصح بضبط data-bs-trigger="hover focus" عند عرض بالون توضيحي فوق زر معطّل؟
يحافظ التفعيل بالمرور والتركيز على الإحساس بتعطّل الزر مع إظهار وإخفاء سبب التعطيل بسلاسة.
استدعاء دالة setContent() في Bootstrap 5.3 يحدّث نصوص البالون برمجياً دون الحاجة لتدمير النسخة وإعادة إنشائها.
صُممت دالة setContent() لتحديث الرأس أو المتن ديناميكياً بكفاءة مع الحفاظ على تعقيم المحتوى.
لماذا يجب إضافة data-bs-container="body" لزر البالون الموضوع داخل مجموعة حقول .input-group؟
إلحاق البالون بوسم body يحافظ على سلامة محددات الأبناء داخل .input-group ويمنع قصّ البطاقة العائمة.