1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:Te9e,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Tooltip. * * Ink panel, white type, 180ms in on a fade and a 4px rise, 120ms out. Fast in, * slower out — the entrance is what somebody is waiting for. * * A TOOLTIP IS NOT AN ACCESSIBLE NAME * It is supplementary. It appears on hover AND on focus (a tooltip that only * appears on hover doesn't exist for a keyboard user), and Radix wires it * with `aria-describedby` — a description, not a label. An icon-only button * still needs its own `aria-label`; the tooltip repeats it for sighted users, * it doesn't replace it. * * Never put anything interactive inside one. There is no way to tab into a * tooltip, and Radix will close it the moment focus moves. * * Radix brings the two things the hand-rolled version could not: the panel is * portalled, so it is no longer clipped by an `overflow: hidden` ancestor (a * tooltip on a table cell used to vanish), and it flips against the viewport * edge instead of running off it. */ export type TooltipProps = { /** The text. One line, ideally — this is a hint, not documentation. */ label: ReactNode; children: ReactNode; side?: "top" | "bottom" | "left" | "right"; /** Beat before it opens. Radix shares this across a group, so moving along a * row of icon buttons shows the second one instantly rather than re-waiting. */ delayDuration?: number; className?: string; }; export function Tooltip({ label, children, side = "top", delayDuration = 200, className, }: TooltipProps) { return ( {children} {label} ); } /** Escape hatch for a group of tooltips that should share one open delay. */ export const TooltipProvider = TooltipPrimitive.Provider; /* ------------------------------------------------------------ composition */ /** * The shadcn-shaped parts, for a tooltip whose panel needs more than a string — * a shortcut hint beside the label, a two-line explanation. * * `Tooltip` above is still the one to reach for. These skip its one guarantee: * that the trigger keeps its own accessible name. */ export const TooltipRoot = TooltipPrimitive.Root; export const TooltipTrigger = TooltipPrimitive.Trigger; export function TooltipContent({ className, sideOffset = 8, ...props }: ComponentProps) { return ( ); } 24:T5914,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Tooltip.
 *
 * Ink panel, white type, 180ms in on a fade and a 4px rise, 120ms out. Fast in,
 * slower out — the entrance is what somebody is waiting for.
 *
 * A TOOLTIP IS NOT AN ACCESSIBLE NAME
 *   It is supplementary. It appears on hover AND on focus (a tooltip that only
 *   appears on hover doesn't exist for a keyboard user), and Radix wires it
 *   with `aria-describedby` — a description, not a label. An icon-only button
 *   still needs its own `aria-label`; the tooltip repeats it for sighted users,
 *   it doesn't replace it.
 *
 * Never put anything interactive inside one. There is no way to tab into a
 * tooltip, and Radix will close it the moment focus moves.
 *
 * Radix brings the two things the hand-rolled version could not: the panel is
 * portalled, so it is no longer clipped by an `overflow: hidden` ancestor (a
 * tooltip on a table cell used to vanish), and it flips against the viewport
 * edge instead of running off it.
 */
export type TooltipProps = {
  /** The text. One line, ideally — this is a hint, not documentation. */
  label: ReactNode;
  children: ReactNode;
  side?: "top" | "bottom" | "left" | "right";
  /** Beat before it opens. Radix shares this across a group, so moving along a
   *  row of icon buttons shows the second one instantly rather than re-waiting. */
  delayDuration?: number;
  className?: string;
};

export function Tooltip({
  label,
  children,
  side = "top",
  delayDuration = 200,
  className,
}: TooltipProps) {
  return (
    <TooltipPrimitive.Provider delayDuration={delayDuration}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>
          <span data-slot="tooltip" className="relative inline-flex">
            {children}
          </span>
        </TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal>
          <TooltipPrimitive.Content
            side={side}
            sideOffset={8}
            className={cn(
              "z-tooltip whitespace-nowrap",
              "rounded-sm bg-surface-inverse px-2.5 py-[7px]",
              "font-ui text-caption font-semibold text-text-inverse",
              "animate-woohl-rise",
              className,
            )}
          >
            {label}
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
}

/** Escape hatch for a group of tooltips that should share one open delay. */
export const TooltipProvider = TooltipPrimitive.Provider;

/* ------------------------------------------------------------ composition */

/**
 * The shadcn-shaped parts, for a tooltip whose panel needs more than a string —
 * a shortcut hint beside the label, a two-line explanation.
 *
 * `Tooltip` above is still the one to reach for. These skip its one guarantee:
 * that the trigger keeps its own accessible name.
 */
export const TooltipRoot = TooltipPrimitive.Root;
export const TooltipTrigger = TooltipPrimitive.Trigger;

export function TooltipContent({
  className,
  sideOffset = 8,
  ...props
}: ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "z-tooltip max-w-[280px] rounded-sm bg-surface-inverse px-2.5 py-[7px]",
          "font-ui text-caption font-semibold text-text-inverse",
          "animate-woohl-rise",
          className,
        )}
        {...props}
      />
    </TooltipPrimitive.Portal>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Tooltip"}],["$","$L1f",null,{"children":"Supplementary hints on hover and focus. Never an accessible name."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"tooltip"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/tooltip","source":"$23","highlighted":"$24","npm":["@radix-ui/react-tooltip"],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]