Help Icon Tooltip

<!--
  The classic help dot beside a field label. The button carries an aria-label
  ("More information") because a bare "?" is not a name, and aria-describedby
  points at the hint. Focus-within reveals it, so keyboard and touch both work.
-->
<span class="inline-flex items-center gap-1.5">
  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">API key</span>
  <span class="group relative inline-flex">
    <button type="button" aria-label="More information" aria-describedby="tt-help" class="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 text-[0.7rem] font-bold leading-none text-gray-600 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-500 dark:text-gray-300 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">?</button>
    <span id="tt-help" 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">Found under Settings → Developer. Treat it like a password.</span>
  </span>
</span>