ای بازار

بررسی اجمالی

نکاتی که هنگام استفاده از افزونه popover باید بدانید:

  • پاپاورها به کتابخانه شخص ثالث متکی هستند Popper.js برای موقعیت یابی شما باید شامل شود popper.min.js قبل از bootstrap.js یا استفاده کنید bootstrap.bundle.min.js / bootstrap.bundle.js که حاوی Popper.js است تا پاپاورها کار کنند!
  • پاپاورها نیاز دارند افزونه tooltip به عنوان یک وابستگی.
  • Popover ها به دلایل عملکردی انتخاب می شوند، بنابراین شما باید خودتان آنها را مقداردهی اولیه کنید.
  • Zero-length title و content ارزش ها هرگز پاپاور را نشان نمی دهند.
  • مشخص كردن container: 'body' برای جلوگیری از بروز مشکلات در اجزای پیچیده تر (مانند گروه های ورودی ما، گروه های دکمه و غیره).
  • راه اندازی پاپاور روی عناصر پنهان کار نخواهد کرد.
  • پاپوور برای .disabled یا disabled عناصر باید بر روی یک عنصر پوششی فعال شوند.
  • هنگامی که از لنگرهایی که در چندین خط قرار می گیرند، پاپاورها بین عرض کلی لنگرها در مرکز قرار می گیرند. استفاده کنید .text-nowrap روی شما <a> برای جلوگیری از این رفتار.
  • Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
  • Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند prefers-reduced-motion Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.

مثال: پاپاورها را در همه جا فعال کنید

یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه، انتخاب آنها بر اساس آنهاست data-bs-toggle ویژگی:

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

مثال: با استفاده از container گزینه

وقتی چند سبک روی عنصر والد دارید که با پاپاور تداخل دارد، می‌خواهید یک سفارشی را مشخص کنید. container به طوری که به جای آن HTML پاپاور در آن عنصر ظاهر شود.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
    container: 'body'
    })

نمونه

    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
چهار جهت
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
    </button>

    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
    </button>

    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
    </button>

    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
    </button>