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 focustrigger 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 disabledattribute 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-eventson 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 clickon 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.