پاپ اور (Popover)

«پاپ اور (Popover)» یک جعبه توضیح کلیکی است. شبیه Tooltip اما بزرگ تر. «کامپوننت (Component)» یعنی قطعه آماده رابط کاربر. مثل کارت یادداشت که روی دکمه باز می شود.

ساخت Popover پایه

ویژگی data-bs-toggle="popover" را اضافه کن. سپس عنوان را در title و متن را در data-bs-content بنویس.

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">
  Toggle popover
</button>

مشاهده در ادیتور

راه اندازی با جاوااسکریپت

بدون «راه اندازی (Initialize)» کار نمی کند. کد زیر همه پاپ اورها را فعال می کند.

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

مشاهده در ادیتور

نکته: عنوان سرِ پاپ اور از title می آید. متن بدنه از data-bs-content تامین می شود.

تعیین موقعیت Popover

پیش فرض، پاپ اور سمت راست است. با data-bs-placement موقعیت را top، bottom، left یا right کن.

<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="Content">
  Left
</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">
  Right
</a>

مشاهده در ادیتور

هشدار: اگر جا برای موقعیت انتخابی نباشد، بوت استرپ جای مناسب را خودکار انتخاب می کند.

بستن Popover و محرک ها

کلیک دوباره، آن را می بندد. با data-bs-trigger="focus" بیرون کلیک کنی، بسته می شود.

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">
  Click me
</a>

مشاهده در ادیتور

نکته: برای نمایش با «هاور (Hover)» از data-bs-trigger="hover" استفاده کن.

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">
  Hover over me
</a>

مشاهده در ادیتور

گام های عملی سریع

1. ویژگی های data-bs-toggle و متن ها را اضافه کن.
2. کد راه اندازی جاوااسکریپت را اجرا کن.
3. موقعیت را با data-bs-placement تنظیم کن.
4. محرک را با data-bs-trigger تعیین کن.

جمع بندی سریع

• Popover از Tooltip بزرگ تر است.
• نیاز به راه اندازی جاوااسکریپت دارد.
• متن بدنه از data-bs-content می آید.
• موقعیت با data-bs-placement کنترل می شود.

مطالب مرتبط: راهنمای ابزار (Tooltip)، توست (Toast).