{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "A label-maker strip: dark embossing tape with raised pale letters and a tab pointing at the trigger. It feeds out a short way from the trigger's side; in a group, the next one prints at once.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/tooltip.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\nimport { cn } from \"cn\"\n\n/**\n * Shares the open delay between tooltips: once one is showing, moving to the\n * next opens it at once, with no animation. Wrap a toolbar or the whole app.\n */\nfunction TooltipProvider({ delay = 400, closeDelay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} closeDelay={closeDelay} {...props} />\n}\n\n/** One trigger and the label it prints. */\nfunction Tooltip(props: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\n/** What the label is about. Renders a button; pass `render` to use your own. */\nfunction TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\"> & {\n    /** Tape colour. Black is the default; red and blue are for the odd label that must stand out. */\n    tone?: \"black\" | \"red\" | \"blue\"\n  }\n\n/**\n * The label: a strip of embossing tape with raised, pale letters and a tab\n * pointing at the trigger. Feeds out a short way from the trigger's side.\n */\nfunction TooltipContent({\n  className,\n  children,\n  tone = \"black\",\n  side = \"top\",\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-tone={tone}\n          className={cn(\n            \"tooltip-tape relative max-w-(--tooltip-max-width) rounded-(--bevel-radius-xs) px-2 py-1 text-(length:--tooltip-text) leading-snug font-semibold tracking-(--bevel-tracking-print) text-balance uppercase select-none\",\n            \"transition-[translate,opacity] duration-(--bevel-duration-small) ease-(--bevel-ease-out) motion-reduce:transition-none\",\n            \"data-starting-style:opacity-0 data-ending-style:opacity-0 data-instant:transition-none\",\n            \"data-[side=top]:data-starting-style:translate-y-(--tooltip-slide) data-[side=bottom]:data-starting-style:-translate-y-(--tooltip-slide)\",\n            \"data-[side=left]:data-starting-style:translate-x-(--tooltip-slide) data-[side=right]:data-starting-style:-translate-x-(--tooltip-slide)\",\n            \"forced-colors:border forced-colors:border-[CanvasText]\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow data-slot=\"tooltip-tab\" aria-hidden className=\"absolute\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent }\nexport type { TooltipContentProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--tooltip-tape-black": "oklch(0.22 0.008 260)",
      "--tooltip-tape-red": "oklch(0.47 0.17 27)",
      "--tooltip-tape-blue": "oklch(0.42 0.13 258)",
      "--tooltip-letter": "oklch(0.96 0.006 90)",
      "--tooltip-rim": "oklch(0 0 0 / 0.3)",
      "--tooltip-emboss": "0 1px 0 oklch(0 0 0 / 0.55), 0 -0.5px 0 oklch(1 0 0 / 0.35)",
      "--tooltip-text": "0.75rem",
      "--tooltip-max-width": "18rem",
      "--tooltip-offset": "0.5rem",
      "--tooltip-slide": "0.25rem",
      "--tooltip-tab-width": "0.625rem",
      "--tooltip-tab-depth": "0.3125rem"
    },
    ".dark": {
      "--tooltip-tape-black": "oklch(0.42 0.008 260)",
      "--tooltip-rim": "oklch(1 0 0 / 0.16)"
    },
    "[data-slot=\"tooltip-content\"], [data-slot=\"tooltip-tab\"]": {
      "--tooltip-tape": "var(--tooltip-tape-black)"
    },
    "[data-slot=\"tooltip-content\"][data-tone=\"red\"], [data-slot=\"tooltip-content\"][data-tone=\"red\"] [data-slot=\"tooltip-tab\"]": {
      "--tooltip-tape": "var(--tooltip-tape-red)"
    },
    "[data-slot=\"tooltip-content\"][data-tone=\"blue\"], [data-slot=\"tooltip-content\"][data-tone=\"blue\"] [data-slot=\"tooltip-tab\"]": {
      "--tooltip-tape": "var(--tooltip-tape-blue)"
    },
    "@utility tooltip-tape": {
      "background-color": "var(--tooltip-tape)",
      "background-image": "linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade))",
      "box-shadow": "inset 0 0 0 1px var(--tooltip-rim), var(--bevel-depth-cast-sm)",
      "color": "var(--tooltip-letter)",
      "text-shadow": "var(--tooltip-emboss)"
    },
    "[data-slot=\"tooltip-tab\"]": {
      "background-color": "var(--tooltip-tape)"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"top\"], [data-slot=\"tooltip-tab\"][data-side=\"bottom\"]": {
      "width": "var(--tooltip-tab-width)",
      "height": "var(--tooltip-tab-depth)"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"left\"], [data-slot=\"tooltip-tab\"][data-side=\"right\"]": {
      "width": "var(--tooltip-tab-depth)",
      "height": "var(--tooltip-tab-width)"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"top\"]": {
      "top": "100%",
      "clip-path": "polygon(0 0, 100% 0, 70% 100%, 30% 100%)"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"bottom\"]": {
      "bottom": "100%",
      "clip-path": "polygon(30% 0, 70% 0, 100% 100%, 0 100%)",
      "background-image": "linear-gradient(to bottom, transparent, var(--bevel-highlight-strong))"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"left\"]": {
      "left": "100%",
      "clip-path": "polygon(0 0, 100% 30%, 100% 70%, 0 100%)"
    },
    "[data-slot=\"tooltip-tab\"][data-side=\"right\"]": {
      "right": "100%",
      "clip-path": "polygon(0 30%, 100% 0, 100% 100%, 0 70%)"
    }
  },
  "categories": [
    "essentials"
  ],
  "type": "registry:ui"
}