Tooltip

<!-- Tooltip -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 px-4 py-44 dark:border-zinc-700 dark:bg-zinc-950/25"
>
  <!-- Tooltip container -->
  <div
    x-data="{
      open: false,

      // 'hover focus', 'click'
      trigger: 'hover focus',
    }"
    class="relative inline-block"
  >
    <button
      x-on:mouseenter="(trigger === 'hover focus') ? open = true : null"
      x-on:mouseleave="(trigger === 'hover focus') ? open = false : null"
      x-on:focus="(trigger === 'hover focus') ? open = true : null"
      x-on:blur="(trigger === 'hover focus') ? open = false : null"
      x-on:click="(trigger === 'click') ? open = !open : null"
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
    >
      <span>Hover me</span>
    </button>
    <div
      x-cloak
      x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-10"
      class="absolute bottom-full start-1/2 z-10 -ms-20 flex w-40 origin-bottom flex-col items-center justify-center pb-0.5 will-change-transform"
    >
      <div
        class="flex-none rounded-lg bg-zinc-900 px-2.5 py-2 text-center text-xs font-semibold text-zinc-50 dark:bg-zinc-700"
      >
        Hey there, I'm a tooltip!
      </div>
      <div
        class="h-0 w-0 flex-none border-e-4 border-s-4 border-t-4 border-e-transparent border-s-transparent border-t-zinc-900 dark:border-t-zinc-700"
        aria-hidden="true"
      ></div>
    </div>
  </div>
  <!-- END Tooltip container -->
</div>
<!-- END Tooltip -->

<!-- Tooltip: On Click -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 px-4 py-44 dark:border-zinc-700 dark:bg-zinc-950/25"
>
  <!-- Tooltip container -->
  <div
    x-data="{
      open: false,

      // 'hover focus', 'click'
      trigger: 'click',
    }"
    class="relative inline-block"
  >
    <button
      x-on:mouseenter="(trigger === 'hover focus') ? open = true : null"
      x-on:mouseleave="(trigger === 'hover focus') ? open = false : null"
      x-on:focus="(trigger === 'hover focus') ? open = true : null"
      x-on:blur="(trigger === 'hover focus') ? open = false : null"
      x-on:click="(trigger === 'click') ? open = !open : null"
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
    >
      <span>Click me</span>
    </button>
    <div
      x-cloak
      x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-10"
      class="absolute bottom-full start-1/2 z-10 -ms-20 flex w-40 origin-bottom flex-col items-center justify-center pb-0.5 will-change-transform"
    >
      <div
        class="flex-none rounded-lg bg-zinc-900 px-2.5 py-2 text-center text-xs font-semibold text-zinc-50 dark:bg-zinc-700"
      >
        Hey there, I'm a tooltip!
      </div>
      <div
        class="h-0 w-0 flex-none border-e-4 border-s-4 border-t-4 border-e-transparent border-s-transparent border-t-zinc-900 dark:border-t-zinc-700"
        aria-hidden="true"
      ></div>
    </div>
  </div>
  <!-- END Tooltip container -->
</div>
<!-- END Tooltip: On Click -->