Components

Popover

Popovers are small overlays that open on demand. This allows users to access additional content and actions without cluttering the page.

Popover Menu

demo@advantch.com
<!-- requires alpine.js -->
<div class="relative flex mr-4 dark:text-gray-400 "
  x-data="{open: false}">
  
  <button @click="open = !open"
    class="btn-light btn-xs"/> Popover Menu
  </button>

  <!-- Popover body -->
  <div x-show="open" x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1" x-cloak @click.away="open = false"
    class="absolute z-95 mt-10 w-52 max-w-52 sm:px-0 transform bg-white dark:bg-slate-600 rounded-lg">
    <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 max-h-dash-sm overflow-y-hidden relative">

      <div class="flex flex-col p-4 space-y-1 font-medium border-b dark:bg-slate-600">
        <span class="text-sm dark:text-gray-400">demo@advantch.com</span>
      </div>

      <ul class="flex flex-col p-2 my-2 space-y-1 text-gray-900 dark:text-gray-400">
        <li>
          <a href="#"
            class="block px-2 py-1 transition rounded-md flex hover:bg-gray-50 dark:hover:bg-slate-700 dark:hover:text-gray-50 ">
            <span class="text-sm font-medium">Profile</span>
          </a>
        </li>
          <li class='not-prose'>
          <a href="#"
            class="block px-2 py-1 transition rounded-md flex hover:bg-gray-50 dark:hover:bg-slate-700 dark:hover:text-gray-50 ">
            <span class="text-sm font-medium">Settings</span>
          </a>
        </li>
      </ul>
        <!-- Popover body -->
    </div>
  </div>
</div>