<!DOCTYPE html>

<html lang="en">
<head>
    <?php echo view('partials/title-meta', array('title' => 'Popover')) ?>
    <?= $this->include('partials/head-css') ?>
  </head>
<body>
<div class="wrapper">
      <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Popover')) ?> <?= $this->include('partials/sidenav') ?>

      <!-- Start Page Content here -->
<div class="page-content">
<main>
          <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Popover')) ?>

          <div class="container">
<div class="grid xl:grid-cols-2 gap-base">
<div class="space-y-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Simple Popover</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-info hover:bg-info-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                          Get Support Info
                        </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Need Help?</h3>
</div>
<div class="p-5">
                            Click here to get support from our team. We're here
                            24/7 to assist you.
                          </div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Hover</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="hs-tooltip inline-block [--placement:right] [--trigger:hover]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-dark text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                          Please Hover Me
                        </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Exciting Features!</h3>
</div>
<div class="p-5">
                            Discover features you didn’t know existed. Hover to
                            explore more!
                          </div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom Popovers</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="flex flex-wrap items-center gap-2.5">
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Primary Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-primary rounded-t-md px-3.5 py-3">
<h3>Primary Popover</h3>
</div>
<div class="bg-primary rounded-b-md px-4 py-2">
                              This is a primary-themed popover styled using CSS
                              variables.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-success hover:bg-success-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Success Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-success rounded-t-md px-3.5 py-3">
<h3>Success Popover</h3>
</div>
<div class="bg-success rounded-b-md px-4 py-2">
                              This is a success-themed popover styled using CSS
                              variables.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-danger hover:bg-danger-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Danger Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-danger rounded-t-md px-3.5 py-3">
<h3>Danger Popover</h3>
</div>
<div class="bg-danger rounded-b-md px-4 py-2">
                              This is a danger-themed popover styled using CSS
                              variables.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-info hover:bg-info-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Info Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-info rounded-t-md px-3.5 py-3">
<h3>Info Popover</h3>
</div>
<div class="bg-info rounded-b-md px-4 py-2">
                              This is an info-themed popover styled using CSS
                              variables.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-dark text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Dark Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-dark rounded-t-md px-3.5 py-3">
<h3>Dark Popover</h3>
</div>
<div class="bg-dark rounded-b-md px-4 py-2">
                              This is a dark-themed popover styled using CSS
                              variables.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-secondary hover:bg-secondary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Secondary Popover
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible invisible absolute z-70 hidden w-55 text-start text-white opacity-0 transition-opacity" role="tooltip">
<div class="bg-secondary rounded-t-md px-3.5 py-3">
<h3>Secondary Popover</h3>
</div>
<div class="bg-secondary rounded-b-md px-4 py-2">
                              This is a secondary-themed popover styled using
                              CSS variables.
                            </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space-y-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Dismiss on Next Click</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                          Show Tips
                        </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Quick Tips</h3>
</div>
<div class="p-5">
                            Get quick tips and tricks to improve your workflow
                            instantly.
                          </div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Four Directions</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="flex flex-wrap items-center gap-2.5">
<div class="hs-tooltip inline-block [--placement:top] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Popover on top
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Top Popover</h3>
</div>
<div class="p-5">
                              This popover appears above the button. Great for
                              tips or info.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:bottom] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Popover on bottom
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Bottom Popover</h3>
</div>
<div class="p-5">
                              This popover shows below. Perfect for additional
                              details.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:right] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Popover on right
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Right Popover</h3>
</div>
<div class="p-5">
                              Slide in from the right to provide quick insights.
                            </div>
</div>
</div>
</div>
<div class="hs-tooltip inline-block [--placement:left] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary hover:bg-primary-hover text-white disabled:pointer-events-none disabled:opacity-50" type="button">
                            Popover on left
                          </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card text-start opacity-0 transition-opacity" role="tooltip">
<div class="bg-default-100 border-default-300 border-b px-3.5 py-3">
<h3>Left Popover</h3>
</div>
<div class="p-5">
                              Appears on the left side. Great for tooltips or
                              notes.
                            </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Elements</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="hs-tooltip inline-block [--placement:top] [--trigger:click]">
<div class="hs-tooltip-toggle block text-center" tabindex="0">
<button class="btn bg-primary text-white disabled:pointer-events-none disabled:opacity-50" disabled="" type="button">
                          Disabled Button
                        </button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border-default-300 invisible absolute z-70 hidden w-70 rounded-md border bg-card p-5 text-start opacity-0 transition-opacity" role="tooltip">
                          This button is disabled, but the popover still works.
                        </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

        <?= $this->include('partials/footer') ?>
      </div>
<!-- End Page content -->
</div>

    <?= $this->include('partials/customizer') ?>
    <?= $this->include('partials/footer-scripts') ?>
  </body>
</html>