پاپ‌آورهای Bootstrap

پاپ‌آورها (Popovers) در Bootstrap دیالوگ‌های پویا و غیرمودالی هستند که زمانی ظاهر می‌شوند که کاربر روی یک عنصر کلیک کند یا ماوس را روی آن ببرد. آن‌ها اطلاعات متنی کوتاه، جزئیات تکمیلی یا گزینه‌های قابل انجام را نمایش می‌دهند. می‌توان آن‌ها را همچون «زمزمه‌های آرامی از بینش» در نظر گرفت که بدون قطع کردن روند کاربر، توضیحاتی در لحظه یا تعاملاتی سریع ارائه می‌کنند. از تعریف اصطلاحات ناآشنا گرفته تا نمایش پیش‌نمایش رسانه‌ای، پاپ‌آورها ابزار انعطاف‌پذیری برای غنی‌سازی رابط کاربری هستند.

این راهنمای جامع به بررسی ساختار، مکانیزم‌های فعال‌سازی، گزینه‌های سفارشی‌سازی، ویژگی‌های پیشرفته، نکات دسترسی‌پذیری و استراتژی‌های خلاقانه استفاده از پاپ‌آورها می‌پردازد.

ساختار پایه پاپ‌آور و روش فعال‌سازی

برای ایجاد یک پاپ‌آور در Bootstrap، به یک عنصر HTML به‌عنوان محرک نیاز دارید که از ویژگی‌های داده‌ای خاصی برای تعریف محتوا و رفتار پاپ‌آور استفاده می‌کند:

عنصر محرک: هر عنصر HTML (مانند دکمه، لینک، span).
data-bs-toggle="popover": این ویژگی اصلی، عملکرد پاپ‌آور را فعال می‌کند.
data-bs-title="عنوان" (اختیاری): عنوانی که در بالای پاپ‌آور نمایش داده می‌شود.
data-bs-content="محتوا": محتوای اصلی یا HTML داخل پاپ‌آور.
data-bs-placement="top|right|bottom|left|auto" (اختیاری): محل قرارگیری اولیه پاپ‌آور نسبت به عنصر محرک (پیش‌فرض: right).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Popover</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Popover</h2>
        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
</body>
</html>

فعال‌سازی با JavaScript

برخلاف برخی دیگر از اجزای Bootstrap، پاپ‌آورها نیاز به مقداردهی اولیه با جاوااسکریپت دارند:

    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>

محل قرارگیری پاپ‌آور (Placement)

با استفاده از ویژگی data-bs-placement، می‌توان محل نمایش پاپ‌آور را کنترل کرد:

top
right (پیش‌فرض)
bottom
left
auto: موقعیت را به‌طور پویا تنظیم می‌کند.

همچنین می‌توانید از گزینه‌هایی مانند top-start، bottom-end برای کنترل دقیق‌تر استفاده کنید.

<div class="container mt-5">
      <div class="container pt-5 text-center">
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="popover"
          data-bs-placement="top"
          data-bs-content="Popover on top"
        >
          Popover on top
        </button>
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="popover"
          data-bs-placement="right"
          data-bs-content="Popover on right"
        >
          Popover on right
        </button>
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="popover"
          data-bs-placement="bottom"
          data-bs-content="Popover on bottom"
        >
          Popover on bottom
        </button>
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="popover"
          data-bs-placement="left"
          data-bs-content="Popover on left"
        >
          Popover on left
        </button>
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="popover"
          data-bs-placement="auto top"
          data-bs-content="Auto top"
        >
          Auto top
        </button>
      </div>
    </div>

رویدادهای تعاملی (`data-bs-trigger`)

نحوه ظاهر و ناپدید شدن پاپ‌آور را می‌توان با ویژگی data-bs-trigger کنترل کرد:

click: پاپ‌آور با کلیک فعال می‌شود (پیش‌فرض).
hover: با رفتن ماوس روی عنصر فعال و با خارج شدن پنهان می‌شود.
focus: با فوکوس گرفتن فعال می‌شود.
manual: کنترل دستی با جاوااسکریپت.

می‌توانید چند محرک را ترکیب کنید: data-bs-trigger="click hover"

<div class="container mt-4 text-center">
    <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover on hover">Hover to toggle popover</button>
    <button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Popover on focus">Focus to toggle popover</button>
    <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="click focus" data-bs-content="Popover on click and focus">Click or focus to toggle</button>
    <button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-trigger="manual" data-bs-content="Manual popover" id="manualPopover">Manual Popover</button>
    <button type="button" class="btn btn-dark mt-2" id="toggleManualPopover">Toggle Manual Popover</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const manualPopover = new bootstrap.Popover(document.getElementById('manualPopover'));
    const toggleManualPopoverBtn = document.getElementById('toggleManualPopover');
    toggleManualPopoverBtn.addEventListener('click', () => {
        manualPopover.toggle();
    });
</script>
    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>

مخفی کردن پاپ‌آورها

پاپ‌آورها معمولاً با کلیک بیرون از آن‌ها ناپدید می‌شوند. اما می‌توان یک دکمه «بستن» در محتوای HTML قرار داد با استفاده از:

<button class="btn btn-sm btn-danger" data-bs-dismiss="popover">بستن</button>

توجه: برای این کار باید data-bs-html="true" استفاده شود.

محتوای پویا و HTML

برای نمایش محتوای HTML یا پویا:

data-bs-html="true": فعال‌سازی نمایش HTML.
با جاوااسکریپت نیز می‌توان محتوای پویا تعریف کرد:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic Bootstrap Popover</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>

  <div class="container mt-4">
    <h2>Popover with HTML Content</h2>
    <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-html="true" data-bs-title="<em>HTML</em> <u>Title</u>" data-bs-content='&lt;div&gt;This popover has &lt;strong&gt;HTML&lt;/strong&gt; content.&lt;/div&gt;&lt;button type="button" class="btn btn-sm btn-danger mt-2" data-bs-dismiss="popover"&gt;Close&lt;/button&gt;'>Popover with HTML</button>

    <h2>Dynamic Popover Content</h2>
    <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="Dynamic Title" id="dynamicPopoverBtn">Dynamic Content</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const dynamicPopoverBtn = document.getElementById('dynamicPopoverBtn');
    const dynamicPopover = new bootstrap.Popover(dynamicPopoverBtn, {
        content: function () {
            return 'Content loaded dynamically at ' + new Date().toLocaleTimeString();
        }
    });
</script>
    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>

  </body>
</html>

تنظیم موقعیت (Offset)

با استفاده از data-bs-offset="x,y" می‌توانید پاپ‌آور را نسبت به عنصر اصلی افست دهید. مثلاً:

Editdata-bs-offset="0,10"

قرار دادن در یک کانتینر خاص

پیش‌فرض این است که پاپ‌آور در body قرار می‌گیرد. با استفاده از data-bs-container="#containerId" می‌توان آن را به عنصر دیگری الصاق کرد.

جایگزین‌های مکان (Fallback)

ویژگی data-bs-fallbackPlacements='["bottom", "top"]' به Bootstrap اجازه می‌دهد مکان‌های جایگزین را بررسی کند اگر مکان اولیه مناسب نبود.

انیمیشن

ویژگی data-bs-animation="true" (پیش‌فرض) یا "false" می‌تواند انیمیشن fade را فعال یا غیرفعال کند.

ایمن‌سازی (Sanitization)

برای امنیت در استفاده از HTML:

data-bs-sanitize="false": غیرفعال‌سازی پاک‌سازی (با احتیاط زیاد).
data-bs-allow-list: تعیین تگ‌ها و ویژگی‌های مجاز.

رویدادهای پاپ‌آور و API جاوااسکریپت

رویدادهای موجود:

show.bs.popover: قبل از ظاهر شدن.
shown.bs.popover: بعد از ظاهر شدن.
hide.bs.popover: قبل از پنهان شدن.
hidden.bs.popover: بعد از پنهان شدن.
inserted.bs.popover: پس از ورود به DOM.

مثال:

const myPopover = document.querySelector('[data-bs-toggle="popover"]');

myPopover.addEventListener('shown.bs.popover', () => {
    console.log('Popover is now visible!');
});

myPopover.addEventListener('hidden.bs.popover', () => {
    console.log('Popover is now hidden!');
});

متدهای جاوااسکریپت:

popoverInstance.show()
popoverInstance.hide()
popoverInstance.toggle()
popoverInstance.dispose()
popoverInstance.update()

نکات مربوط به دسترسی‌پذیری (Accessibility)

عنصر محرک باید قابل فوکوس باشد (مثل دکمه یا لینک).
aria-describedby را به عنصر محرک اضافه کنید.
قابل کنترل با کیبورد باشد.
دکمه بستن برای دسترسی بهتر وجود داشته باشد.
از گزینه auto برای جلوگیری از پوشاندن محتواهای مهم استفاده کنید.

استراتژی‌های خلاقانه استفاده

منوهای سریع اقدام: نمایش گزینه‌های مرتبط.
پیش‌نمایش تصویر یا ویدیو.
راهنمایی فرم‌ها.
تعریف اصطلاحات تخصصی.
گزینه‌های اشتراک‌گذاری.
راهنمای تعاملی.
راهنمای زمینه‌ای برای UI.

بهترین شیوه‌ها

محتوا را مختصر نگه دارید.
از استفاده زیاد خودداری کنید.
رفتار محرک را با دقت انتخاب کنید.
جایگاه را در سایزهای مختلف تست کنید.
دسترسی‌پذیری را در اولویت قرار دهید.

نتیجه‌گیری

پاپ‌آورهای Bootstrap ابزاری قدرتمند برای ارائه اطلاعات زمینه‌ای هستند که بدون شلوغ کردن رابط کاربری، تجربه کاربر را غنی می‌سازند. با درک ساختار، روش‌های فعال‌سازی، گزینه‌های سفارشی‌سازی و رعایت نکات دسترسی‌پذیری، می‌توانید از پاپ‌آورها به‌صورت مؤثر برای هدایت کاربران و ارائه راهنمایی‌های ظریف استفاده کنید.