{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-tooltip-5","type":"registry:block","title":"Tooltip on notification bell with badge count","description":"Tooltip on notification bell with badge count","dependencies":[],"registryDependencies":["@reui/badge","button","tooltip"],"files":[{"path":"c-tooltip-5.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Notifications\" />\n          }\n        >\n          <div className=\"relative\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"InformationCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <Badge\n              variant=\"destructive\"\n              size=\"xs\"\n              className=\"absolute -top-3.5 -right-3.5\"\n            >\n              3\n            </Badge>\n          </div>\n        </TooltipTrigger>\n        <TooltipContent className=\"p-3\">\n          <div className=\"flex flex-col gap-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <span className=\"font-medium\">Notifications</span>\n              <Badge variant=\"destructive\" size=\"xs\">\n                3 new\n              </Badge>\n            </div>\n            <div className=\"flex flex-col gap-1 opacity-80\">\n              <p>• Sarah commented on your PR</p>\n              <p>• Build #421 completed</p>\n              <p>• New team member joined</p>\n            </div>\n            <a\n              href=\"#\"\n              className=\"flex items-center gap-1 font-medium underline underline-offset-2\"\n            >\n              View all\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n                className=\"size-3.5\"\n              />\n            </a>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </div>\n  )\n}","target":"components/examples/c-tooltip-5.tsx"}],"meta":{"order":5}}