Tooltip

import { Tooltip, TooltipTrigger, TooltipContent } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
import { HeroSpecimen } from '../_components/HeroSpecimen';

export default function TooltipSnapshot() {
  return (
    <VariantGrid
      title="Tooltip"
      // Gallery thumbnail: a static, non-portaled mock of the open tooltip. The
      // real Tooltip portals to document.body, which escapes the hidden hero
      // wrapper (it would leak a stray bubble onto the detail page) and positions
      // nondeterministically inside the 160px iframe. The variants below stay
      // closed — the interactive preview reveals the real tooltip on hover.
      hero={
        <HeroSpecimen className="max-w-[180px]">
          <div className="flex flex-col items-center gap-1.5">
            <span className="bg-ink-1 text-on-ink rounded-md px-2.5 py-1.5 text-xs">
              Helpful description
            </span>
            <button
              type="button"
              className="border-stroke text-ink-2 rounded-md border px-2.5 py-1 text-xs"
            >
              Hover me
            </button>
          </div>
        </HeroSpecimen>
      }
      variants={[
        {
          label: 'default',
          node: (
            <Tooltip>
              <TooltipTrigger>
                <button type="button">Hover me</button>
              </TooltipTrigger>
              <TooltipContent>Helpful description text</TooltipContent>
            </Tooltip>
          ),
        },
        {
          label: 'with kbd',
          node: (
            <Tooltip>
              <TooltipTrigger>
                <button type="button">Open palette</button>
              </TooltipTrigger>
              <TooltipContent kbd="⌘K">Command palette</TooltipContent>
            </Tooltip>
          ),
        },
        {
          label: 'side right',
          node: (
            <Tooltip>
              <TooltipTrigger>
                <button type="button">Right</button>
              </TooltipTrigger>
              <TooltipContent side="right">Appears on the right</TooltipContent>
            </Tooltip>
          ),
        },
        {
          label: 'side bottom',
          node: (
            <Tooltip>
              <TooltipTrigger>
                <button type="button">Bottom</button>
              </TooltipTrigger>
              <TooltipContent side="bottom">Appears below</TooltipContent>
            </Tooltip>
          ),
        },
      ]}
    />
  );
}