sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
128 lines (121 loc) • 6.45 kB
HTML
---
layout: default
title: "Popover - Sleek Admin Dashboard Template"
parent: "components"
sub_parent: "components"
activePage: "popover-tooltip"
plugins: []
---
<div class="breadcrumb-wrapper">
<h1>Popover & Tooltip</h1>
{% include breadcrumb.htm %}
</div>
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Popover Basic</h2>
</div>
<div class="card-body">
<p class="pb-5"> Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/"
target="_blank">more details.</a>
</p>
<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="popover" title="Popover Title" data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Tooltips Basic</h2>
</div>
<div class="card-body">
<p class="mb-5"> Adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/" target="_blank">more details.</a>
</p>
<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="tooltip" title="Tooltip Title">Launch Tooltip</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Four Directions Popover </h2>
</div>
<div class="card-body">
<p class="pb-5"> Four options are available: top, right, bottom, and left aligned. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/" target="_blank">more details.</a>
</p>
<button type="button" class="btn mb-1 btn-info btn-pill" 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 mb-1 btn-warning btn-pill" 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 mb-1 btn-danger btn-pill" 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 mb-1 btn-dark btn-pill" data-container="body" data-toggle="popover" data-placement="left"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2> Four Directions Tooltip</h2>
</div>
<div class="card-body">
<p class="pb-5"> Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/"
target="_blank">more details.</a>
</p>
<button type="button" class="btn mb-1 btn-pill btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn mb-1 btn-pill btn-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn mb-1 btn-pill btn-warning" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn mb-1 btn-pill btn-dark" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Dismiss on Next Click Popover</h2>
</div>
<div class="card-body">
<p class="pb-5"> Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/"
target="_blank">more details.</a>
</p>
<button type="button" class="btn mb-1 btn-lg btn-success btn-pill" data-toggle="popover" data-trigger="focus" title="Popover Title"
data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disabled elements</h2>
</div>
<div class="card-body">
<p class="pb-5"> Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click
them to trigger a tooltip. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.4/components/popovers/"
target="_blank">more details.</a>
</p>
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn mb-1 btn-success btn-lg btn-pill" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
</div>
</div>
</div>
</div>