|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<title>Popovers | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
|
|
|
<meta content="Coderthemes" name="author" />
|
|
|
<!-- App favicon -->
|
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
|
|
<!-- App css -->
|
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
|
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
|
|
|
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
|
|
|
<!-- Begin page -->
|
|
|
<div class="wrapper">
|
|
|
@@include('./partials/left-sidebar.html')
|
|
|
|
|
|
<!-- ============================================================== -->
|
|
|
<!-- Start Page Content here -->
|
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
<div class="content-page">
|
|
|
<div class="content">
|
|
|
@@include('./partials/topbar.html')
|
|
|
|
|
|
<!-- Start Content-->
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- start page title -->
|
|
|
<div class="row">
|
|
|
<div class="col-12">
|
|
|
<div class="page-title-box">
|
|
|
<div class="page-title-right">
|
|
|
<ol class="breadcrumb m-0">
|
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
|
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Base UI</a></li>
|
|
|
<li class="breadcrumb-item active">Popovers</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
<h4 class="page-title">Popovers</h4>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- end page title -->
|
|
|
|
|
|
<div class="row">
|
|
|
<div class="col-xl-6">
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h4 class="header-title">Simple Popover</h4>
|
|
|
<p class="text-muted font-14">
|
|
|
Popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.
|
|
|
</p>
|
|
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a href="#simple-popover-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
|
|
|
Preview
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a href="#simple-popover-code" data-toggle="tab" aria-expanded="true" class="nav-link">
|
|
|
Code
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul> <!-- end nav-->
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane show active" id="simple-popover-preview">
|
|
|
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
|
|
</div> <!-- end preview-->
|
|
|
|
|
|
<div class="tab-pane" id="simple-popover-code">
|
|
|
<pre class="mb-0">
|
|
|
<span class="html escape">
|
|
|
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
|
|
</span>
|
|
|
</pre> <!-- end highlight-->
|
|
|
</div> <!-- end preview code-->
|
|
|
</div> <!-- end tab-content-->
|
|
|
</div> <!-- end card-body -->
|
|
|
</div> <!-- end card-->
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h4 class="header-title">Dismiss on Next Click</h4>
|
|
|
<p class="text-muted font-14">Use the <code>focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
|
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a href="#dismiss-popover-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
|
|
|
Preview
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a href="#dismiss-popover-code" data-toggle="tab" aria-expanded="true" class="nav-link">
|
|
|
Code
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul> <!-- end nav-->
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane show active" id="dismiss-popover-preview">
|
|
|
<button type="button" tabindex="0" class="btn btn-success" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
|
|
|
Dismissible popover
|
|
|
</button>
|
|
|
</div> <!-- end preview-->
|
|
|
|
|
|
<div class="tab-pane" id="dismiss-popover-code">
|
|
|
<pre class="mb-0">
|
|
|
<span class="html escape">
|
|
|
<button type="button" tabindex="0" class="btn btn-success" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
|
|
|
Dismissible popover
|
|
|
</button>
|
|
|
</span>
|
|
|
</pre> <!-- end highlight-->
|
|
|
</div> <!-- end preview code-->
|
|
|
</div> <!-- end tab-content-->
|
|
|
</div> <!-- end card-body -->
|
|
|
</div> <!-- end card-->
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h4 class="header-title">Hover</h4>
|
|
|
<p class="text-muted font-14">Use the attribute <code>data-trigger="hover"</code> to show the popover on hovering the element.</p>
|
|
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a href="#hover-popover-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
|
|
|
Preview
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a href="#hover-popover-code" data-toggle="tab" aria-expanded="true" class="nav-link">
|
|
|
Code
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul> <!-- end nav-->
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane show active" id="hover-popover-preview">
|
|
|
<button type="button" tabindex="0" class="btn btn-dark" data-toggle="popover" data-trigger="hover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Ohh Wow !">
|
|
|
Please Hover Me
|
|
|
</button>
|
|
|
</div> <!-- end preview-->
|
|
|
|
|
|
<div class="tab-pane" id="hover-popover-code">
|
|
|
<pre class="mb-0">
|
|
|
<span class="html escape">
|
|
|
<button type="button" tabindex="0" class="btn btn-dark" data-toggle="popover" data-trigger="hover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Ohh Wow !">
|
|
|
Please Hover Me
|
|
|
</button>
|
|
|
</span>
|
|
|
</pre> <!-- end highlight-->
|
|
|
</div> <!-- end preview code-->
|
|
|
</div> <!-- end tab-content-->
|
|
|
</div> <!-- end card-body -->
|
|
|
</div> <!-- end card-->
|
|
|
</div> <!-- end col -->
|
|
|
|
|
|
<div class="col-xl-6">
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h4 class="header-title">Four Directions</h4>
|
|
|
<p class="text-muted font-14">Four options are available: top, right, bottom, and left aligned.</p>
|
|
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a href="#extras-popover-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
|
|
|
Preview
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a href="#extras-popover-code" data-toggle="tab" aria-expanded="true" class="nav-link">
|
|
|
Code
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul> <!-- end nav-->
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane show active" id="extras-popover-preview">
|
|
|
<div class="button-list">
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on top
|
|
|
</button>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
|
|
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on bottom
|
|
|
</button>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on right
|
|
|
</button>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
|
|
|
Popover on left
|
|
|
</button>
|
|
|
</div>
|
|
|
</div> <!-- end preview-->
|
|
|
|
|
|
<div class="tab-pane" id="extras-popover-code">
|
|
|
<pre class="mb-0">
|
|
|
<span class="html escape">
|
|
|
<!-- Top Position -->
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on top
|
|
|
</button>
|
|
|
|
|
|
<!-- Bottom Position -->
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
|
|
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on bottom
|
|
|
</button>
|
|
|
|
|
|
<!-- Right Position -->
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
|
|
|
Popover on right
|
|
|
</button>
|
|
|
|
|
|
<!-- Left Position -->
|
|
|
<button type="button" class="btn btn-primary" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
|
|
|
Popover on left
|
|
|
</button>
|
|
|
</span>
|
|
|
</pre> <!-- end highlight-->
|
|
|
</div> <!-- end preview code-->
|
|
|
</div> <!-- end tab-content-->
|
|
|
</div> <!-- end card-body -->
|
|
|
</div> <!-- end card-->
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<h4 class="header-title">Disabled Elements</h4>
|
|
|
<p class="text-muted font-14">Elements with the <code>disabled</code> 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 <code><div></code> or <code><span></code> and override the <code>pointer-events</code> on the disabled element.</p>
|
|
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a href="#disabled-popover-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
|
|
|
Preview
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a href="#disabled-popover-code" data-toggle="tab" aria-expanded="true" class="nav-link">
|
|
|
Code
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul> <!-- end nav-->
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-pane show active" id="disabled-popover-preview">
|
|
|
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
|
|
|
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
|
|
|
</span>
|
|
|
</div> <!-- end preview-->
|
|
|
|
|
|
<div class="tab-pane" id="disabled-popover-code">
|
|
|
<pre class="mb-0">
|
|
|
<span class="html escape">
|
|
|
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
|
|
|
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
|
|
|
</span>
|
|
|
</span>
|
|
|
</pre> <!-- end highlight-->
|
|
|
</div> <!-- end preview code-->
|
|
|
</div> <!-- end tab-content-->
|
|
|
</div> <!-- end card-body -->
|
|
|
</div> <!-- end card-->
|
|
|
</div> <!-- end col -->
|
|
|
</div>
|
|
|
<!-- end row -->
|
|
|
|
|
|
</div> <!-- container -->
|
|
|
|
|
|
</div> <!-- content -->
|
|
|
|
|
|
@@include('./partials/footer.html')
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- ============================================================== -->
|
|
|
<!-- End Page content -->
|
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<!-- END wrapper -->
|
|
|
|
|
|
|
|
|
@@include('./partials/right-sidebar.html')
|
|
|
|
|
|
|
|
|
<!-- bundle -->
|
|
|
<script src="assets/js/vendor.min.js"></script>
|
|
|
<script src="assets/js/app.min.js"></script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
