العناصر المنبثقة Popovers في إطار العمل Bootstrap

استخدم العناصر المنبثقّة Popovers التي يوفّرها إطار العمل Bootstrap لإضافة تنسيقات وتأثيرات مماثلة لتلك الموجودة في iOS إلى صفحات ويب.

نظرة عامّة

في ما يلي أمور ينبغي إدراكها قبل البدء في استخدام مكوِّن العناصر المنبثقة الذي يوفّره Bootstrap:

• تعتمد العناصر المنبثقة على مكتبة Popper.js في تموضعها. لذا يجب - من أجل أن تعمل هذه العناصر - تضمين popper.min.js قبل bootstrap.js أو استخدام bootstrap.bundle.min.js أو bootstrap.bundle.js الذين يتضمّنان Popper.js.
• تعتمد العناصر المنبثقة على مُلحَق التلميحات.
• انتبه إنْ كنت تبني JavaScript من الملفّات المصدريّة لإطار العمل Bootstrap إلى أنّه يتطلّب الملف util.js
• العناصر المنبثقة اختيّاريّة - لأسباب تتعلّق بالأداء، ويجب بالتالي تمهيدها يدويّا.
• لا تظهر عناصر منبثقة أبدًا في قيم title وcontent الفارغة.
• حدّد القيمة container: 'body' لتجنّب مشاكل في العرض في المكوِّنات الأكثر تعقيدًا (مثل مجموعات الإدخال، مجموعات الأزرار، ...إلخ).
• لن تعمل العناصر المنبثقة على العناصر المخفيّة.
• يجب ابتداء العناصر المنبثقة على العنصُر المُغلِّف عند استهداف عناصر تطبِّق الخاصيّة disabled أو الصنف ‎.disabled.
• تتوسّط العناصر المنبثقة عند ابتدائها من روابط تلتفّ على أسطر متعدّدة تتوسّط العرض الكامل للرابط. استخدم الخاصيّة white-space: nowrap;‎ على الرابط <a> لتفادي هذا الأمر.
• يجب إخفاء العناصر المنبثقة حتى يتسنّى حذفُ العناصر المتعلّقة بها من كائن المستند DOM.

واصل القراءة لأمثلة عن كيفيّة عمل العناصر المنبثقة.

مثال: تفعيل العناصر المنبثقة في كلّ مكان

إحدى طرق تمهيد Initialization جميع العناصر المنبثقة في صفحة هي تحديدها باستخدام قيمة data-toggle الخاصّة بها (data-toggle="popover"‎).

$(function () {
  $('[data-toggle="popover"]').popover()
})

مثال: استخدام الخيّار container

عندما تكون هناك أنماط على عنصُر أب تتداخل مع عنصُر منبثق فستحتاج لتحديد حاويّة (container) مُخصَّصة بحيث تظهر شفرة HTML الخاصّة بالعنصُر المنبثق داخل الحاويّة.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

مثال

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="وصف محتوى العنصُر">انقر لإظهار العنصُر المنبثق أو إخفائه</button>

الاتّجاهات الأربع

تتوفّر أربع خيّارات لمحاذاة العنصُر المبثق: في الأعلى، وإلى اليمين، وفي الأسفل وإلى اليسار.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="وصف العنصُر">
  عنصُر منبثق إلى الأعلى
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="وصف العنصُر">
  عنصُر منبثق إلى اليمين
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="وصف العنصُر">
  عنصُر منبثق إلى الأسفل
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="وصف العنصُر">
  عنصُر منبثق إلى اليسار
</button>

الإخفاء عند النقر خارج العنصُر

استخدم الخاصيّة focus لإخفاء العنصُر المنبثق عند نقر المستخدم على عنصُر مغاير للذي تسبّب في إظهار العنصُر المنبثق. تنبيه: تتطلّب هذه الميزة لكي تعمل على مختلف المنصّات والمتصفّحات استخدام الوسم <a> _لا_ الوسم <button>، كما يجب أن تضمِّن الخاصيّة tabindex.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="وصف العنصُر">عنصُر منبثق يمكن إخفاؤه</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

العناصر المُعطَّلة

لا تعدّ العناصر التي تُطبَّق عليها الخاصيّة disabled تفاعليّة، ممّا يعني أنّ المستخدمين لا يستطيعون الحومان فوقها أو النقر عليها لإظهار عنصُر منبثق (أو تلميح). الحلّ البديل هو إظهار عنصُر منبثق من عنصُر مغلِّف (

أو ) وإبطال أحداث المؤشِّر (pointer-events) على العنصُر المُعطَّل.

يمكن كذلك استخدام الخاصيّة data-trigger="hover"‎ لابتداء العنصُر المنبثق مباشرةً إذْ قد لا يتوقّع الزائر أنّ بإمكانه النقر على عنصُر مُعطَّل.

<span class="d-inline-block" data-toggle="popover" data-content="عنصُر منبثق">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>زرّ مُعطَّل</button>
</span>

استخدام مُلحَق JavaScript

تفعيل العناصر المنبثقة باستخدام شفرة JavaScript:

$('#example').popover(options)

الخيّارات

يمكن تمرير الخيّارات عبر خاصيّات البيانات أو عن طريق JavaScript. ألحق اسم الخيّار بالكلمة data-‎ (مثلًا data-animation=""‎ للخيّار animation) عند التمرير عبر خاصيّات البيانات.