توضیحات

لینک 
<a class="btn btn-primary rounded bs-popover mb-3" data-container="body" data-content="راهنمای ابزار با استفاده از برچسب لینک">
    لینک
</a>
<button type="button" class="btn btn-success rounded bs-popover mb-3" data-container="body" data-content="راهنمای ابزار با استفاده از برچسب دکمه">
    دکمه
</button>

تعیین سطح

data-placement="top"

data-placement="right"

data-placement="bottom"

data-placement="left"

<!-- TOP -->
<button type="button" class="btn btn-info mr-2 rounded bs-popover mb-4 ml-2" data-container="body" data-placement="top" data-content="راهنما در سمت بالا">
    توضیحات در بالا
</button>

<!-- RIGHT -->
<button type="button" class="btn btn-danger mr-2 rounded bs-popover mb-4 ml-2" data-container="body" data-placement="right" data-content="راهنما در سمت راست">
    توضیحات در راست
</button>

<!-- BOTTOM -->
<button type="button" class="btn btn-warning mr-2 rounded bs-popover mb-4 ml-2" data-container="body" data-placement="bottom" data-content="راهنما در سمت پایین">
    توضیحات در پایین
</button>

<!-- LEFT -->
<button type="button" class="btn btn-secondary mr-2 rounded bs-popover mb-4 ml-2" data-container="body" data-placement="left" data-content="راهنما در سمت چپ">
    توضیحات در چپ
</button>

توضیحات رد شده

توضیحات در چپ 
<a tabindex="0" class="btn btn-dark rounded bs-popover mb-3" data-container="body" data-trigger="focus" data-placement="left" data-content="لورم ایپسوم متن ساختگی.">
    توضیحات در چپ
</a>

گزینه ها

data-trigger="hover"

پیشفرض

data-delay="1000"

data-animation="false"

<!-- روی هاور -->
<button type="button" class="btn btn-button-2 bs-popover rounded" data-container="body" data-trigger="hover" data-content="روی هاور">
    روی هاور
</button>

<!-- در فوکوس -->
<button type="button" class="btn btn-button-3 bs-popover rounded" data-container="body" data-content="در فوکوس">
    در فوکوس
</button>

<!-- Delay -->
<button type="button" class="btn btn-button-4 bs-popover rounded" data-container="body" data-delay="1000" data-content="Delay 1s">
    Delay
</button>

<!-- انیمیشن رد شده -->
<button type="button" class="btn btn-button-5 bs-popover rounded" data-container="body" data-animation="false" data-content="انیمیشن رد شده">
    انیمیشن رد شده
</button>

رنگها

برای اضافه کردن طرح رنگی ، قالب توضیحات html را مطابق شکل زیر تغییر دهید.

<!--اولیه-->
<button type="button" class="btn btn-primary btn-popover-primary mb-2 rounded" data-container="body" data-html="true" data-placement="top">اولیه</button>

$('.btn-popover-primary').popover({
    template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
    title: "Primary",
    content: "Primary popover"
});

© کپی رایت

بومی سازی شده توسط : ایمان پاکروح