Keyboard Shortcut Tooltip

<!--
  Label plus its hotkey, the keys in real <kbd> elements so they read as keys, not
  prose. The keys are decoration of the label, so the whole bubble is one
  tooltip - announced as the trigger's description.
-->
<span class="group relative inline-flex">
  <button type="button" aria-describedby="tt-kbd" class="flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white 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">
    <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path d="M4 3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Zm2 3h8v2H6V6Zm0 4h5v2H6v-2Z" /></svg>
    <span class="sr-only">Save</span>
  </button>
  <span id="tt-kbd" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 flex w-max -translate-x-1/2 items-center gap-1.5 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium 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">
    Save
    <kbd class="rounded border border-white/25 bg-white/10 px-1.5 py-0.5 font-sans text-[0.65rem] dark:border-black/20 dark:bg-black/10">Ctrl</kbd>
    <kbd class="rounded border border-white/25 bg-white/10 px-1.5 py-0.5 font-sans text-[0.65rem] dark:border-black/20 dark:bg-black/10">S</kbd>
  </span>
</span>