پاپ اورها

<div class="btn-list">
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="top" title="پاپ‌آور بالا"
        data-bs-content="و اینجا یک محتوای شگفت‌انگیز هست. خیلی جذابه، نه؟">
        پاپ‌آور بالا
    </a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="right" title="پاپ‌آور راست"
        data-bs-content="و اینجا یک محتوای شگفت‌انگیز هست. خیلی جذابه، نه؟">
        پاپ‌آور راست
    </a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="bottom" title="پاپ‌آور پایین"
        data-bs-content="و اینجا یک محتوای شگفت‌انگیز هست. خیلی جذابه، نه؟">
        پاپ‌آور پایین
    </a>
    <a tabindex="0" class="btn btn-outline-primary btn-wave" role="button"
        data-bs-toggle="popover" data-bs-placement="left" title="پاپ‌آور چپ"
        data-bs-content="و اینجا یک محتوای شگفت‌انگیز هست. خیلی جذابه، نه؟">
        پاپ‌آور چپ
    </a>
</div>

<div class="btn-list">
                        <button type="button" class="btn btn-outline-primary btn-wave" data-bs-toggle="popover"
                            data-bs-placement="top" data-bs-custom-class="header-primary"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر آبی (اولیه).">
                            هدر اولیه
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-wave" data-bs-toggle="popover"
                            data-bs-placement="right" data-bs-custom-class="header-secondary"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر خاکستری (ثانویه).">
                            هدر ثانویه
                        </button>
                        <button type="button" class="btn btn-outline-info btn-wave" data-bs-toggle="popover"
                            data-bs-placement="bottom" data-bs-custom-class="header-info"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر آبی روشن (اطلاعاتی).">
                            هدر اطلاعاتی
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-wave" data-bs-toggle="popover"
                            data-bs-placement="left" data-bs-custom-class="header-warning"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر زرد (هشدار).">
                            هدر هشدار
                        </button>
                        <button type="button" class="btn btn-outline-success btn-wave" data-bs-toggle="popover"
                            data-bs-placement="top" data-bs-custom-class="header-success"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر سبز (موفقیت).">
                            هدر موفقیت
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-wave" data-bs-toggle="popover"
                            data-bs-placement="top" data-bs-custom-class="header-danger"
                            title="هدر رنگی" data-bs-content="پاپ‌آور با هدر قرمز (خطر).">
                            هدر خطر
                        </button>
                    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="popover"
            data-bs-placement="top" data-bs-custom-class="popover-primary"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Primary
        </button>
        <button type="button" class="btn btn-secondary btn-wave"
            data-bs-toggle="popover" data-bs-placement="right"
            data-bs-custom-class="popover-secondary" title="پس زمینه رنگی"
            data-bs-content="لورم ایپسوم متن ساختگی">
            Secondary
        </button>
        <button type="button" class="btn btn-info btn-wave" data-bs-toggle="popover"
            data-bs-placement="bottom" data-bs-custom-class="popover-info"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Info
        </button>
        <button type="button" class="btn btn-warning btn-wave" data-bs-toggle="popover"
            data-bs-placement="left" data-bs-custom-class="popover-warning"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Warning
        </button>
        <button type="button" class="btn btn-success btn-wave" data-bs-toggle="popover"
            data-bs-placement="top" data-bs-custom-class="popover-success"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Success
        </button>
        <button type="button" class="btn btn-danger btn-wave" data-bs-toggle="popover"
            data-bs-placement="right" data-bs-custom-class="popover-danger"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Danger
        </button>
        <button type="button" class="btn btn-teal btn-wave" data-bs-toggle="popover"
            data-bs-placement="bottom" data-bs-custom-class="popover-teal"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Teal
        </button>
        <button type="button" class="btn btn-purple btn-wave" data-bs-toggle="popover"
            data-bs-placement="left" data-bs-custom-class="popover-purple"
            title="پس زمینه رنگی" data-bs-content="لورم ایپسوم متن ساختگی">
            Purple
        </button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="top" data-bs-custom-class="popover-primary-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Primary
        </button>
        <button type="button" class="btn btn-secondary-light btn-wave"
            data-bs-toggle="popover" data-bs-placement="right"
            data-bs-custom-class="popover-secondary-light" title="پس زمینه لایت"
            data-bs-content="لورم ایپسوم متن ساختگی.">
            Secondary
        </button>
        <button type="button" class="btn btn-info-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="bottom" data-bs-custom-class="popover-info-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Info
        </button>
        <button type="button" class="btn btn-warning-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="left" data-bs-custom-class="popover-warning-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Warning
        </button>
        <button type="button" class="btn btn-success-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="top" data-bs-custom-class="popover-success-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Success
        </button>
        <button type="button" class="btn btn-danger-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="right" data-bs-custom-class="popover-danger-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Danger
        </button>
        <button type="button" class="btn btn-teal-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="bottom" data-bs-custom-class="popover-teal-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Teal
        </button>
        <button type="button" class="btn btn-purple-light btn-wave" data-bs-toggle="popover"
            data-bs-placement="left" data-bs-custom-class="popover-purple-light"
            title="پس زمینه لایت" data-bs-content="لورم ایپسوم متن ساختگی.">
            Purple
        </button>
    </div>

<a tabindex="0" class="btn btn-primary m-1" role="button"
    data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="پاپ‌آور قابل بستن"
    data-bs-content="و این یک محتوای شگفت‌انگیز است. خیلی جذابه، درسته؟">بستن پاپ‌آور (بالا)</a>

<a tabindex="0" class="btn btn-secondary m-1" role="button"
    data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="پاپ‌آور قابل بستن"
    data-bs-content="و این یک محتوای شگفت‌انگیز است. خیلی جذابه، درسته؟">بستن پاپ‌آور (راست)</a>

<a tabindex="0" class="btn btn-info m-1" role="button" data-bs-toggle="popover"
    data-bs-trigger="focus" data-bs-placement="bottom" title="پاپ‌آور قابل بستن"
    data-bs-content="و این یک محتوای شگفت‌انگیز است. خیلی جذابه، درسته؟">بستن پاپ‌آور (پایین)</a>

<a tabindex="0" class="btn btn-warning m-1" role="button" data-bs-toggle="popover"
    data-bs-trigger="focus" data-bs-placement="left" title="پاپ‌آور قابل بستن"
    data-bs-content="و این یک محتوای شگفت‌انگیز است. خیلی جذابه، درسته؟">بستن پاپ‌آور (چپ)</a>

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover"
        data-bs-trigger="hover focus" data-bs-content="Disabled popover">
        <button class="btn btn-primary" type="button" disabled>دکمه غیرفعال</button>
        </span>

<a class="me-4 svg-primary" href="javascript:void(0)" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-custom-class="popover-primary only-body" data-bs-content="این پاپ‌آور برای نمایش جزئیات مربوط به این آیکون استفاده می‌شود.">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
    </a>
    <a class="me-4 svg-secondary" href="javascript:void(0)" data-bs-toggle="popover"
        data-bs-placement="left" data-bs-custom-class="popover-secondary only-body" data-bs-content="این پاپ‌آور برای ارائه اطلاعات درباره این آیکون استفاده می‌شود.">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
    </a>