Tooltips

            
<!-- Top tooltip -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
  <span aria-label="Top Tooltip" data-microtip-position="top" role="tooltip">Top Tooltip</span>
</button>

<!-- Bottom tooltip -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
  <span aria-label="Bottom Tooltip" data-microtip-position="bottom" role="tooltip">Bottom Tooltip</span>
</button>

<!-- Left tooltip -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
  <span aria-label="Left Tooltip" data-microtip-position="left" role="tooltip">Left Tooltip</span>
</button>

<!-- Right tooltip -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
  <span aria-label="Right Tooltip" data-microtip-position="right" role="tooltip">Right Tooltip</span>
</button>