نویدهای پاپ‌آپ Bootstrap 5

پوپ‌اپ

پوپ‌اپ (Popover) یک کامپوننت مشابه ابزار نمايش است؛ این یک پوپ‌اپ است که هنگام کلیک کاربر ظاهر می‌شود. تفاوت اصلی این است که پوپ‌اپ می‌تواند محتوای بیشتری را شامل شود.

چگونه پوپ‌اپ ایجاد کنیم

برای ایجاد پوپ‌اپ، لطفاً data-bs-toggle="popover" به عنصر اضافه شود.

لطفاً از title خصوصیت تعیین می‌کند که متن عنوان پوپ‌اپ چیست و از data-bs-content خصوصیت تعیین می‌کند که چه متنی در متن پوپ‌اپ نمایش داده شود:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="عنوان پوپ‌اپ" data-bs-content="متن داخل پوپ‌اپ">تغییر پوپ‌اپ</button>

توجه:پوپ‌اپ‌ها باید با استفاده از JavaScript به صورت اولیه تنظیم شوند تا کار کنند.

کد زیر تمام پوپ‌اپ‌های موجود در سند را فعال می‌کند:

مثال

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

آزمایش کنید

تعیین موقعیت پوپ‌اپ

به طور پیش‌فرض، پوپ‌اپ در سمت راست عنصر ظاهر می‌شود.

لطفاً از data-bs-placement تنظیمات نمايش پوپ‌اپ در موقعيت بالا، پایین، چپ یا راست عناصر:

مثال

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="محتوای">به سمت چپ</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="محتوای">به سمت راست</a>

آزمایش کنید

توجه:اگر فضای کافی وجود نداشته باشد، ویژگی placement به طور پیش‌بینی شده کار نمی‌کند. به عنوان مثال: اگر شما از ویژگی placement top در بالای صفحه (بدون فضای رزرو شده) استفاده کنید، نوار بالایی در زیر یا سمت راست عنصر (در هر مکانی که فضا وجود دارد) نمایش داده می‌شود.

بستن نوار بالایی

به طور پیش‌فرض، دوباره کلیک بر روی عنصر باعث بستن نوار بالایی می‌شود. اما شما می‌توانید از data-bs-trigger="focus" ویژگی، تنظیم این ویژگی باعث می‌شود که نوار بالایی در خارج از عنصر بسته شود:

مثال

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="کلیک بر روی هر بخش از مستندات برای بستن این نوار بالایی ممکن است">من را کلیک کنید</a>

آزمایش کنید

نوار بالایی نقطه‌نمایی

توجه:اگر می‌خواهید که هنگام حرکت موس به روی عنصر نوار بالایی نمایش داده شود، از مقدار "hover" از data-bs-trigger ویژگی‌ها:

مثال

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="متن نوار بالایی">لطفاً بالای من را قرار دهید</a>

آزمایش کنید