{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-tooltip-2","type":"registry:block","title":"Tooltips opening from different sides.","description":"Tooltips opening from different sides.","dependencies":[],"registryDependencies":["button","tooltip"],"files":[{"path":"c-tooltip-2.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst sides = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nexport function Pattern() {\n  return (\n    <div className=\"grid max-w-xs grid-cols-3 gap-2\">\n      {sides.map((side) => (\n        <Tooltip key={side}>\n          <TooltipTrigger\n            render={<Button variant=\"outline\" className=\"w-full\" />}\n          >\n            {side.replace(\"-\", \" \")[0].toUpperCase() +\n              side.replace(\"-\", \" \").slice(1)}\n          </TooltipTrigger>\n          <TooltipContent side={side}>\n            <p className=\"text-sm\">Add to library</p>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n    </div>\n  )\n}","target":"components/examples/c-tooltip-2.tsx"}],"meta":{"order":2}}