دمو زنده#
ما از جاوا اسکریپت مشابه کد بالا برای ایجاد پاپاور زنده زیر استفاده میکنیم. عنوانها از طریق data-bs-title تنظیم میشوند و محتوای بدنه از طریق data-bs-content مشخص میشود.
<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="عنوان پاپاور" data-bs-content="و این هم محتوای شگفتانگیز. بسیار جذاب است. درست است؟">برای تغییر وضعیت پاپاور کلیک کنید</button>
جهتهای پاپاور #
چهار گزینه موجود است: بالا، راست، پایین و چپ.
<!-- موقعیت بالا -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" title="">
پاپاور در بالا
</button>
<!-- موقعیت پایین -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" title="">
پاپاور در پایین
</button>
<!-- موقعیت چپ -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" title="عنوان پاپاور">
پاپاور در چپ
</button>
<!-- موقعیت راست -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" title="">
پاپاور در راست
</button>
عدم نمایش با کلیک بعدی#
از تریگر focus برای عدم نمایش پاپاورها در کلیک بعدی کاربر بر روی عنصر دیگری استفاده کنید.
<button type="button" tabindex="0" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="و این هم محتوای شگفتانگیز. بسیار جذاب است. درست است؟" title="پاپاور غیرقابل نمایش">
پاپاور غیرقابل نمایش
</button>
هوور#
از تریگر data-bs-trigger="hover" برای نمایش پاپاور استفاده کنید.
<button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="و این هم محتوای شگفتانگیز. بسیار جذاب است. درست است؟" title="اوه چه جالب!">
لطفا روی من هوور کنید
</button>
پاپاورهای سفارشی#
شما میتوانید ظاهر پاپاورها را با استفاده از متغیرهای CSS سفارشی کنید. ما یک کلاس سفارشی با data-bs-custom-class="primary-popover" تعیین میکنیم تا ظاهر سفارشی خود را محدود کنیم و از آن استفاده کنیم تا برخی از متغیرهای محلی CSS را نادیده بگیریم.
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="primary-popover" data-bs-title="پاپاور اولیه" data-bs-content="این پاپاور از طریق متغیرهای CSS تمدار شده است.">
پاپاور اولیه
</button>
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="success-popover" data-bs-title="پاپاور موفق" data-bs-content="این پاپاور از طریق متغیرهای CSS تمدار شده است.">
پاپاور موفق
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="danger-popover" data-bs-title="پاپاور خطرناک" data-bs-content="این پاپاور از طریق متغیرهای CSS تمدار شده است.">
پاپاور خطرناک
</button>
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="info-popover" data-bs-title="پاپاور اطلاعات" data-bs-content="این پاپاور از طریق متغیرهای CSS تمدار شده است.">
پاپاور اطلاعات
</button>
عناصر غیرفعال #
عناصر با ویژگی disabled غیر تعاملی هستند، به این معنی که کاربران نمیتوانند روی آنها حرکت کرده یا کلیک کنند تا یک پاپاور (یا تولتیپ) را فعال کنند. به عنوان یک راهحل، شما باید پاپاور را از یک <div> یا <span> wrapper فعال کنید و ویژگی pointer-events را بر روی عنصر غیرفعال نادیده بگیرید.
<span class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="پاپاور غیرفعال">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>دکمه غیرفعال</button>
</span>