{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:item",
  "title": "Tooltip",
  "description": "A popup that displays information on hover.",
  "files": [
    {
      "path": "registry/brook/ui/tooltip/tooltip.tsx",
      "content": "\"use client\";\n\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./tooltip.module.css\";\n\nfunction TooltipProvider({ ...props }: Tooltip.Provider.Props) {\n  return <Tooltip.Provider {...props} />;\n}\n\nfunction TooltipRoot({ ...props }: Tooltip.Root.Props) {\n  return <Tooltip.Root {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: Tooltip.Trigger.Props) {\n  return <Tooltip.Trigger {...props} />;\n}\n\nconst TooltipPortal = Tooltip.Portal;\n\nfunction TooltipPositioner({ className, ...props }: Tooltip.Positioner.Props) {\n  return <Tooltip.Positioner className={cn(styles.positioner, className)} data-slot=\"tooltip-positioner\" {...props} />;\n}\n\nfunction TooltipPopup({ className, ...props }: Tooltip.Popup.Props) {\n  return <Tooltip.Popup className={cn(styles.popup, className)} {...props} />;\n}\n\nfunction TooltipArrow({ className, ...props }: Tooltip.Arrow.Props) {\n  return (\n    <Tooltip.Arrow className={cn(styles.arrow, className)} {...props}>\n      <ArrowSvg />\n    </Tooltip.Arrow>\n  );\n}\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg aria-hidden=\"true\" fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\" {...props}>\n      <path\n        className={styles.arrowFill}\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n      />\n      <path\n        className={styles.arrowOuterStroke}\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n      />\n      <path\n        className={styles.arrowInnerStroke}\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n      />\n    </svg>\n  );\n}\n\nexport {\n  ArrowSvg,\n  TooltipRoot as Tooltip,\n  TooltipArrow,\n  TooltipPopup,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipProvider,\n  TooltipTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/tooltip/tooltip.tsx"
    },
    {
      "path": "registry/brook/ui/tooltip/tooltip.module.css",
      "content": ".positioner {\n  z-index: 9999;\n}\n\n.popup {\n  max-width: 20rem;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  color: var(--primary);\n  background-color: var(--mix-card-33-bg);\n  border-radius: var(--radius);\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  transition:\n    transform 0.125s ease-out,\n    opacity 0.125s ease-out;\n  transform-origin: var(--transform-origin);\n  word-wrap: break-word;\n  position: relative;\n  margin-bottom: 0.25rem;\n  border: 0.5px solid oklch(from var(--border) l c h / 0.7);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.97);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n}\n\n.arrow {\n  position: absolute;\n  width: 20px;\n  height: 10px;\n  z-index: 1;\n\n  &[data-side=\"top\"] {\n    bottom: -8px;\n    transform: rotate(180deg);\n  }\n\n  &[data-side=\"bottom\"] {\n    top: -8px;\n    transform: rotate(0deg);\n  }\n\n  &[data-side=\"left\"] {\n    right: 8px;\n    transform: rotate(90deg);\n  }\n\n  &[data-side=\"right\"] {\n    left: -8px;\n    transform: rotate(-90deg);\n  }\n\n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n}\n\n.arrowFill {\n  fill: var(--mix-card-33-bg);\n}\n\n.arrowOuterStroke {\n  fill: oklch(from var(--border) l c h / 0.6);\n}\n\n.arrowInnerStroke {\n  fill: oklch(from var(--border) l c h / 0.1);\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/tooltip/tooltip.module.css"
    }
  ]
}