Rich Tooltip

<!--
  A richer bubble - a bold title over a line of description - but still a tooltip:
  the content is read-only, so it stays non-interactive (no links or buttons in
  here, or it would need to be a popover with focus management). Everything else
  is the same contract: focus-reachable, role="tooltip", aria-describedby.
-->
<span class="group relative inline-flex">
  <button type="button" aria-describedby="tt-rich" 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">
    SLA
  </button>
  <span id="tt-rich" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-30 w-64 max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-lg bg-gray-900 p-3 text-left opacity-0 shadow-lg transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100">
    <span class="block text-xs font-semibold text-gray-50 dark:text-gray-900">99.99% uptime</span>
    <span class="mt-1 block text-xs leading-snug text-gray-300 dark:text-gray-600">Measured monthly, excluding scheduled maintenance windows announced 48h ahead.</span>
  </span>
</span>