بوت استرپ پاپ آور مؤلفه ای با گزینه های مختلف برای ارائه اجزای منحصر به فرد پاپ آور مطابق با استانداردهای طراحی مترونیک.
Initialize all popovers on a page by adding the data-toggle attribute.
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="click" title="نمونه content">
کلیک کنید
</button>
دلار(function () {
دلار('[data-toggle="popover"]').popover()
})
Four options are available: top, right, bottom, and left aligned.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="نمونه content">
بالا
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="نمونه content">
راست
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="نمونه content">
پایین
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="نمونه content">
چپ
</button>Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip).
<span class="d-inline-block" data-toggle="popover" data-content="غیرفعال popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>غیرفعال button</button>
</span>
Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
<a tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" title="کلیک کنید" data-content="نمونه content">
کلیک کنید
</a>Insert any جی اس into the popover.
<button type="button" class="btn btn-primary" data-toggle="popover" title="پاپ آور title" data-html="true" data-content="And here's some amazing <span class='label label-inline font-weight-bold label-light-primary'> جی اس</span> content. It's very <code>engaging</code>. چپ?">
کلیک کنید
</button>آفست of the popover relative to its target. For more information refer to Tether's offset docs.
<button type="button" class="btn btn-primary mr-2" data-container="body" data-offset="20px 20px" data-toggle="popover" data-placement="top" data-content="نمونه content">
نمونه 1
</button>
<button type="button" class="btn btn-success mr-2" data-container="body" data-offset="-20px -20px" data-toggle="popover" data-placement="top" data-content="نمونه content">
نمونه 2
</button>
<button type="button" class="btn btn-danger" data-container="body" data-offset="60px 0px" data-toggle="popover" data-placement="top" data-content="نمونه content">
نمونه 3
</button>
