Basic Tooltip

<!--
  CSS-only, zero JS. group-hover handles the mouse; group-focus-within handles
  keyboard focus AND a touch tap (tapping the button focuses it) - so the hint is
  reachable without a pointer. That is why the trigger is a real <button>.
  role="tooltip" + aria-describedby ties the hint to its trigger for a screen reader.
-->
<span class="group relative inline-flex">
  <button
    type="button"
    aria-describedby="tt-basic"
    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"
  >
    Hover or focus me
  </button>

  <span
    id="tt-basic"
    role="tooltip"
    class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-max max-w-xs -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium leading-snug text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900"
  >
    Changes are saved automatically.
    <span aria-hidden="true" class="absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 bg-gray-900 dark:bg-gray-100"></span>
  </span>
</span>