Tooltip

// Built on Radix (npm i @radix-ui/react-tooltip): opens on hover and focus,
// closes on Escape, and wires aria-describedby. Mount <Tooltip.Provider> once.
import * as T from "@radix-ui/react-tooltip";

export function Tooltip({ label, shortcut, children }: { label: string; shortcut?: string; children: React.ReactNode }) {
  return (
    <T.Root delayDuration={300}>
      <T.Trigger asChild>{children}</T.Trigger>
      <T.Portal>
        <T.Content sideOffset={6}
          className="z-50 inline-flex max-w-[240px] items-center gap-2 rounded bg-fg px-2.5 py-1.5 text-[12.5px] font-medium text-bg shadow-md">
          {label}
          {shortcut && <kbd className="rounded-sm border border-bg/30 px-1 font-mono text-[11px] text-bg/75">{shortcut}</kbd>}
          <T.Arrow className="fill-fg" width={10} height={5} />
        </T.Content>
      </T.Portal>
    </T.Root>
  );
}

// <Tooltip label="Copy link" shortcut="⌘L">
//   <button type="button" aria-label="Copy link" className="grid size-9 place-items-center rounded border border-border-strong"><Link className="size-4" /></button>
// </Tooltip>