Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

پاپ آور (Popover)

  2. کیت های رابط کاربری
  3. پاپ آور

پاپ آور پایه

برای تنظیم پاپ آور از data-bs-toggle='popover' استفاده کنید.

پاپ آور قابل بستن 
<button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" title="پاپ آور پایه" data-bs-content="اگر بازگردانی بسته کمک نکرد، می‌توانید به پنجره خروجی در Visual Studio نگاه کنید.">عجله کن!
</button>
<button class="example-popover btn btn-success mb-0 me-0" type="button" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="پاپ آور هنگام هاور" data-offset="-20px -20px" data-bs-content="چندین مجموعه دستورالعمل کاربردی در Bootstrap 4 قرار داده شده‌اند تا یادگیری برای مبتدیان در زمینه ساخت وب بسیار آسان شود.">نمایش راهنما هنگام هاور
</button>
<a class="btn btn-lg btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="پاپ آور قابل بستن" data-bs-title="پاپ آور قابل بستن" data-bs-content="شما حتی می‌توانید قبل از انتشار نسخه نهایی Bootstrap 4، تغییرات و بهبودهای آن را توسعه دهید و پیشنهاد دهید.">
پاپ آور قابل بستن
</a>

جهت پاپ آور

برای تنظیم موقعیت پاپ آور از data-bs-placement='top/bottom/...' استفاده کنید.

<div class="card-body common-flex">
<button class="example-popover btn btn-warning mb-0 me-0 text-light" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="پاپ آور در بالا" data-bs-content="پنجره‌های شناور نیاز به پلاگین tooltip دارند.">پاپ آور در بالا</button>
<button class="example-popover btn btn-danger mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="right" title="پاپ آور در راست" data-bs-content="پنجره‌های شناور به صورت اختیاری هستند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید.">پاپ آور در راست</button>
<button class="example-popover btn btn-info mb-0 me-0 text-light" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="پاپ آور در پایین" data-bs-content="شناسایی container: برای جلوگیری از مشکلات رندر در کامپوننت‌های پیچیده‌تر (مانند گروه‌های ورودی Bootstrap، گروه دکمه‌ها و غیره).">پاپ آور در پایین</button>
<button class="example-popover btn btn-dark mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="پاپ آور در چپ" data-bs-content="پنجره‌های شناور به صورت اختیاری هستند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید.">پاپ آور در چپ</button>
</div>

جابجایی پاپ آور

برای افزودن جابجایی پاپ آور از data-bs-offset="*" استفاده کنید.

<div class="card-body common-flex">
                <button class="btn btn-secondary mb-0 me-0" type="button" data-bs-offset="50,0" data-bs-toggle="popover" data-bs-delay-show="5000" title="عنوان پاپ آور" data-bs-content="و اینجا محتوای شگفت‌انگیزی وجود دارد. بسیار جذاب است، درست است؟" data-kt-initialized="1">جابجایی پنجره 50</button>
                <button class="example-popover btn btn-dark mb-0 me-0" type="button" data-bs-offset="-50,0" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="پاپ آور در چپ" data-bs-content="پنجره‌های شناور به صورت اختیاری هستند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید.">جابجایی پنجره -50</button>
                </div>