Popover پیش فرض

استفاده از a پاپ اور پیش فرض در بوت استرپ با اضافه کردن data-bs-toggle="popover" نسبت دادن به یک عنصر محتوای popover را با data-bs-content ویژگی

<button type="button" class="btn btn-primary" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
    Default Popover
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-no-arrow" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
    No Arrow Popover
</button>
مسیرهای پاپ اور

تنظیم کنید مسیرهای پاپ اور در بوت استرپ با کلاس هایی مانند data-bs-placement="top" یا data-bs-placement="bottom". این کلاس ها محل ظاهر شدن popover نسبت به عنصر را کنترل می کنند.

<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Top Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Popover on top
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="right" data-bs-toggle="popover" title="Right Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Popover on right
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="bottom" data-bs-toggle="popover" title="Bottom Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Popover on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="left" data-bs-toggle="popover" title="Left Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Popover on left
</button>
پاپ اوررنگی

الف را اعمال کنید رنگ سفارشی به پاپ اور بوت استرپ خود با استفاده از data-bs-custom-class="popover-*" ویژگی این کلاس یک رنگ پس زمینه سفارشی برای پاپ اور تنظیم می کند.

<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Primary Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Primary
</button>
<button type="button" class="btn btn-secondary" data-bs-custom-class="popover-secondary" data-bs-placement="top" data-bs-toggle="popover" title="Secondary Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Secondary
</button>
<button type="button" class="btn btn-success" data-bs-custom-class="popover-success" data-bs-placement="bottom" data-bs-toggle="popover" title="Success Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Success
</button>
<button type="button" class="btn btn-info" data-bs-custom-class="popover-info" data-bs-placement="bottom" data-bs-toggle="popover" title="Info Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Info
</button>
<button type="button" class="btn btn-warning" data-bs-custom-class="popover-warning" data-bs-placement="right" data-bs-toggle="popover" title="Warning Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Warning
</button>
<button type="button" class="btn btn-danger" data-bs-custom-class="popover-danger" data-bs-placement="right" data-bs-toggle="popover" title="Danger Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Danger
</button>
<button type="button" class="btn btn-light" data-bs-custom-class="popover-light" data-bs-placement="left" data-bs-toggle="popover" title="Light Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Light
</button>
<button type="button" class="btn btn-dark" data-bs-custom-class="popover-dark" data-bs-placement="left" data-bs-toggle="popover" title="Dark Popover" data-bs-content="This is a very beautiful popover, show some love.">
    Dark
</button>
سفارشی سازی تم
طرح بندی:
عمودی
افقی
نیم جعبه
عرض محتوا:
پیش فرض
جعبه
جهت چیدمان:
LTR
RTL
حالت چیدمان:
نور
تاریک
سیستم
اندازه نوار کناری:
پیش فرض
متوسط
نماد
نماد شناور