Popovers
<button type="button" class="btn btn-lg btn-danger mt-2" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dismiss on next click
<a tabindex="0" class="btn btn-danger mt-2" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
Disabled elements
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> and override the pointer-events on the disabled element.
Hover elements
<span class="d-inline-block" data-trigger="hover" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary mt-2" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
For disabled popover triggers, you may also prefer data-trigger="hover" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.
Four directions
<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
<button type="button" class="btn btn-secondary mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
Four options are available: top, right, bottom, and left aligned.
Popovers With Color
<button type="button" class="btn btn-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
<button type="button" class="btn btn-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
<button type="button" class="btn btn-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
<button type="button" class="btn btn-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
Four options are available: top, right, bottom, and left aligned.
Popovers With Color
<button type="button" class="btn iq-bg-primary mt-2" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
<button type="button" class="btn iq-bg-success mt-2" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
<button type="button" class="btn iq-bg-danger mt-2" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
<button type="button" class="btn iq-bg-info mt-2" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
Four options are available: top, right, bottom, and left aligned.