2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Te8b,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Tooltip as TooltipPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useState, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; const ProviderContext = createContext(false); export function TooltipProvider({ delayDuration = 400, skipDelayDuration = 300, ...props }: ComponentProps) { return ( ); } const OFFSET = { top: { y: 4 }, bottom: { y: -4 }, left: { x: 4 }, right: { x: -4 } } as const; export interface TooltipProps extends Omit, "content"> { /** The tooltip label. */ content: ReactNode; /** A keyboard shortcut shown after the label, e.g. "⌘K". */ shortcut?: string; /** The element that shows the tooltip on hover and focus. */ children: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; delayDuration?: number; } export function Tooltip({ content, shortcut, children, open: openProp, defaultOpen = false, onOpenChange, delayDuration, side = "top", sideOffset = 8, collisionPadding = 8, className, ...props }: TooltipProps) { const inProvider = useContext(ProviderContext); const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const tooltip = ( {children} {open && ( {content} {shortcut && ( {shortcut} )} )} ); return {inProvider ? tooltip : {tooltip}}; } export default Tooltip; 2e:T87d9,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { createContext, useCallback, useContext, useState, type ComponentProps, type ReactNode } from "react";
import { cn } from "@/lib/utils";

const ProviderContext = createContext(false);

export function TooltipProvider({ delayDuration = 400, skipDelayDuration = 300, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <ProviderContext.Provider value={true}>
      <TooltipPrimitive.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props} />
    </ProviderContext.Provider>
  );
}

const OFFSET = { top: { y: 4 }, bottom: { y: -4 }, left: { x: 4 }, right: { x: -4 } } as const;

export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, "content"> {
  /** The tooltip label. */
  content: ReactNode;
  /** A keyboard shortcut shown after the label, e.g. "⌘K". */
  shortcut?: string;
  /** The element that shows the tooltip on hover and focus. */
  children: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  delayDuration?: number;
}

export function Tooltip({
  content,
  shortcut,
  children,
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  delayDuration,
  side = "top",
  sideOffset = 8,
  collisionPadding = 8,
  className,
  ...props
}: TooltipProps) {
  const inProvider = useContext(ProviderContext);
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  const setOpen = useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );

  const tooltip = (
    <TooltipPrimitive.Root open={open} onOpenChange={setOpen} delayDuration={delayDuration}>
      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
      <AnimatePresence>
        {open && (
          <TooltipPrimitive.Portal forceMount>
            <TooltipPrimitive.Content forceMount asChild side={side} sideOffset={sideOffset} collisionPadding={collisionPadding} {...props}>
              <motion.div
                className={cn(
                  "z-50 flex origin-(--radix-tooltip-content-transform-origin) select-none items-center gap-2 rounded-[10px] px-2.5 py-1.5",
                  "bg-neutral-950 text-[12.5px] font-medium leading-none tracking-[-0.005em] text-white",
                  "shadow-[0_8px_24px_-6px_rgb(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.08)]",
                  "dark:bg-white dark:text-neutral-950 dark:shadow-[0_8px_24px_-6px_rgb(0_0_0/0.6)]",
                  className,
                )}
                initial={{ opacity: 0, scale: 0.94, ...OFFSET[side] }}
                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
                exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.1 } }}
                transition={{ type: "spring", bounce: 0.2, duration: 0.3 }}
              >
                {content}
                {shortcut && (
                  <kbd className="-mr-1 rounded-md bg-white/[0.12] px-1.5 py-1 font-sans text-[11px] leading-none text-white/70 dark:bg-black/[0.07] dark:text-neutral-500">
                    {shortcut}
                  </kbd>
                )}
              </motion.div>
            </TooltipPrimitive.Content>
          </TooltipPrimitive.Portal>
        )}
      </AnimatePresence>
    </TooltipPrimitive.Root>
  );

  return <MotionConfig reducedMotion="user">{inProvider ? tooltip : <TooltipProvider>{tooltip}</TooltipProvider>}</MotionConfig>;
}

export default Tooltip;

2f:T5a0,import { Bold, Italic, Link2, List, Quote, Underline } from "lucide-react"; import { Tooltip, TooltipProvider } from "@/components/scalar-ui/tooltip"; const tools = [ { icon: Bold, label: "Bold", shortcut: "⌘B" }, { icon: Italic, label: "Italic", shortcut: "⌘I" }, { icon: Underline, label: "Underline", shortcut: "⌘U" }, { icon: Link2, label: "Add link", shortcut: "⌘K" }, { icon: List, label: "Bulleted list" }, { icon: Quote, label: "Quote" }, ]; export default function Demo() { return (

{tools.map(({ icon: Icon, label, shortcut }, i) => ( ))}

); } 30:T2b8f,

import { Bold, Italic, Link2, List, Quote, Underline } from "lucide-react";
import { Tooltip, TooltipProvider } from "@/components/scalar-ui/tooltip";

const tools = [
  { icon: Bold, label: "Bold", shortcut: "⌘B" },
  { icon: Italic, label: "Italic", shortcut: "⌘I" },
  { icon: Underline, label: "Underline", shortcut: "⌘U" },
  { icon: Link2, label: "Add link", shortcut: "⌘K" },
  { icon: List, label: "Bulleted list" },
  { icon: Quote, label: "Quote" },
];

export default function Demo() {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-0.5 rounded-2xl bg-white p-1.5 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
        {tools.map(({ icon: Icon, label, shortcut }, i) => (
          <Tooltip key={label} content={label} shortcut={shortcut} defaultOpen={i === 3}>
            <button
              type="button"
              aria-label={label}
              className="flex size-9 items-center justify-center rounded-[10px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white"
            >
              <Icon className="size-4" />
            </button>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

31:T10ec,

import { Tooltip, TooltipProvider } from "@/components/scalar-ui/tooltip";

const trigger =
  "inline-flex h-10 items-center justify-center rounded-[14px] px-4 text-sm font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip content="Add to library" defaultOpen>
        <button type="button" className={trigger}>Hover me</button>
      </Tooltip>
    </TooltipProvider>
  );
}

32:T2158,

import { Tooltip, TooltipProvider } from "@/components/scalar-ui/tooltip";

const trigger =
  "inline-flex h-10 items-center justify-center rounded-[14px] px-4 text-sm font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

const sides = ["left", "top", "bottom", "right"] as const;

export default function Example() {
  return (
    <TooltipProvider delayDuration={0}>
      <div className="flex flex-wrap items-center justify-center gap-3">
        {sides.map((side) => (
          <Tooltip key={side} content={`On the ${side}`} side={side}>
            <button type="button" className={`${trigger} capitalize`}>
              {side}
            </button>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

33:T1471,

import { Search } from "lucide-react";
import { Tooltip, TooltipProvider } from "@/components/scalar-ui/tooltip";

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip content="Search" shortcut="⌘K" defaultOpen>
        <button
          type="button"
          aria-label="Search"
          className="flex size-10 items-center justify-center rounded-[14px] text-neutral-700 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"
        >
          <Search className="size-4" />
        </button>
      </Tooltip>
    </TooltipProvider>
  );
}

29:["$","section","tooltip",{"id":"tooltip","aria-labelledby":"tooltip-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"tooltip-title","className":"sr-only","children":"Tooltip"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"tooltip","gated":{"unlocked":true,"files":[{"name":"tooltip.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { Tooltip, TooltipProvider } from \"@/components/scalar-ui/tooltip\";\n\nconst trigger =\n \"inline-flex h-10 items-center justify-center rounded-[14px] px-4 text-sm font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nexport default function Example() {\n return (\n \n \n \n \n \n );\n}\n","html":"$31"},"side":{"name":"side.tsx","code":"import { Tooltip, TooltipProvider } from \"@/components/scalar-ui/tooltip\";\n\nconst trigger =\n \"inline-flex h-10 items-center justify-center rounded-[14px] px-4 text-sm font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nconst sides = [\"left\", \"top\", \"bottom\", \"right\"] as const;\n\nexport default function Example() {\n return (\n \n

\n {sides.map((side) => (\n \n \n \n ))}\n

\n \n );\n}\n","html":"$32"},"shortcut":{"name":"shortcut.tsx","code":"import { Search } from \"lucide-react\";\nimport { Tooltip, TooltipProvider } from \"@/components/scalar-ui/tooltip\";\n\nexport default function Example() {\n return (\n \n \n \n \n \n \n \n );\n}\n","html":"$33"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add tooltip","shadcn":"npx shadcn@latest add https://scalarui.com/r/tooltip.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L34","toolbar":"$L35"}]}],["$L36","$L37","$L38"]]}]

Tooltips

Tooltips

Default

Side

With Shortcut