Step Tooltip Sequence

<!--
  driver.js-style sequence. The highlight ring moves along a mock toolbar as the
  step advances; the tooltip's caret is positioned by the step index - targets
  share the row evenly, so slot i's centre is (i + 0.5)/total, no measuring. Wire
  Next/Prev, the dots and ArrowLeft/Right with JS - see the React/TypeScript tabs.
-->
<div class="mx-auto w-full max-w-md">
  <div class="flex items-stretch gap-1 rounded-xl border border-gray-200 bg-white p-1.5 dark:border-gray-800 dark:bg-gray-950">
    <div aria-current="step" class="flex min-w-0 flex-1 items-center justify-center rounded-lg bg-blue-600 px-2 py-2 text-xs font-medium text-white ring-2 ring-blue-500 ring-offset-1 ring-offset-white dark:ring-offset-gray-950"><span class="truncate">Search</span></div>
    <div class="flex min-w-0 flex-1 items-center justify-center rounded-lg px-2 py-2 text-xs font-medium text-gray-500 dark:text-gray-400"><span class="truncate">Filter</span></div>
    <div class="flex min-w-0 flex-1 items-center justify-center rounded-lg px-2 py-2 text-xs font-medium text-gray-500 dark:text-gray-400"><span class="truncate">Sort</span></div>
    <div class="flex min-w-0 flex-1 items-center justify-center rounded-lg px-2 py-2 text-xs font-medium text-gray-500 dark:text-gray-400"><span class="truncate">Share</span></div>
  </div>

  <div class="relative mt-3">
    <div class="absolute -top-1.5 h-3 w-3 rotate-45 border-l border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900" style="left:12.5%;margin-left:-0.375rem" aria-hidden="true"></div>
    <div role="dialog" aria-labelledby="seq-title" class="rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
      <div class="flex items-center justify-between gap-2">
        <h3 id="seq-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Search anything</h3>
        <span class="shrink-0 text-xs font-medium text-gray-500 dark:text-gray-400">1 / 4</span>
      </div>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Jump to any record from here - no menu-hunting.</p>
      <div class="mt-4 flex items-center justify-between gap-3">
        <div class="flex items-center gap-1.5" role="tablist" aria-label="Tour steps">
          <button type="button" role="tab" aria-selected="true" aria-label="Go to step 1" class="h-2 w-5 rounded-full bg-blue-600 dark:bg-blue-500"></button>
          <button type="button" role="tab" aria-selected="false" aria-label="Go to step 2" class="h-2 w-2 rounded-full bg-gray-300 hover:bg-gray-400 dark:bg-gray-700"></button>
          <button type="button" role="tab" aria-selected="false" aria-label="Go to step 3" class="h-2 w-2 rounded-full bg-gray-300 hover:bg-gray-400 dark:bg-gray-700"></button>
          <button type="button" role="tab" aria-selected="false" aria-label="Go to step 4" class="h-2 w-2 rounded-full bg-gray-300 hover:bg-gray-400 dark:bg-gray-700"></button>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" disabled class="rounded-md border border-gray-300 px-3 py-1.5 text-xs font-semibold text-gray-700 disabled:opacity-40 dark:border-gray-700 dark:text-gray-200">Prev</button>
          <button type="button" class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>