اتجاهات وحاوية البالون المنبثق | البالونات المنبثقة Popovers في بوتستراب 5

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

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

يمكنك توجيه البالون في أربعة اتجاهات عبر السمة data-bs-placement بقيم top أو right (الافتراضي للبالون) أو bottom أو left، مع تكفّل محرك Popper بعكس الاتجاه تلقائياً عند الاقتراب من حواف نافذة المتصفح.

وعند إدراج زر البالون داخل مجموعة إدخال .input-group أو صف جدول قابل للتمرير الأفقي .table-responsive، احرص دائماً على تمرير data-bs-container="body" حتى لا يُحشر عنصر البالون داخل حدود الحاوية الضيقة أو يتشوه تنسيق الحقول المجاورة.

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

HTML

<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>

جرّب بنفسك

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

Popover Directions Container اتجاهات وحاوية البالون المنبثق

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

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