Animation

            
<script src="https://unpkg.com/@ryangjchandler/alpine-tooltip@1.2.0/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.7/dist/tippy.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.7/animations/shift-away.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.7/animations/scale.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.7/animations/perspective.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <span x-data="{ tooltip: 'This is a fade tooltip.' }">
    <button type="button" x-tooltip="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Fade</button>
  </span>
  <span x-data="{ tooltip: 'This is a shift away tooltip.' }">
    <button type="button" x-tooltip.animation.shift-away="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Shift away</button>
  </span>
  <span x-data="{ tooltip: 'This is a scale tooltip.' }">
    <button type="button" x-tooltip.animation.scale="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Scale</button>
  </span>
  <span x-data="{ tooltip: 'This is a perspective tooltip.' }">
    <button type="button" x-tooltip.animation.perspective="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Perspective</button>
  </span>
</div>