Positioned Tooltip

<!--
  One trigger per side. The placement is pure offset math - the tip is absolutely
  positioned against the group, and each side swaps which edge it anchors to.
  Every one is still keyboard-reachable (group-focus-within) and screen-reader
  described (role="tooltip" + aria-describedby).
-->
<div class="flex flex-wrap items-center justify-center gap-8">
  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-pos-top" class="cursor-default rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Top</button>
    <span id="tt-pos-top" role="tooltip" class="pointer-events-none absolute z-30 w-max max-w-xs rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition bottom-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Above</span>
  </span>

  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-pos-right" class="cursor-default rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Right</button>
    <span id="tt-pos-right" role="tooltip" class="pointer-events-none absolute z-30 w-max max-w-xs rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition left-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Beside</span>
  </span>

  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-pos-bottom" class="cursor-default rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Bottom</button>
    <span id="tt-pos-bottom" role="tooltip" class="pointer-events-none absolute z-30 w-max max-w-xs rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition top-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Below</span>
  </span>

  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-pos-left" class="cursor-default rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Left</button>
    <span id="tt-pos-left" role="tooltip" class="pointer-events-none absolute z-30 w-max max-w-xs rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition right-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Beside</span>
  </span>
</div>