{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-14",
  "type": "registry:component",
  "title": "Tooltip 14",
  "description": "Tooltip 14. A small popup that appears when a user hovers over or focuses on an element, providing additional information or context.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "hover-card",
    "progress"
  ],
  "files": [
    {
      "path": "components/watermelon/tooltip-14.tsx",
      "type": "registry:component",
      "content": "import { FaCalendarAlt } from 'react-icons/fa';\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/components/base-ui/hover-card';\nimport { Progress } from '@/components/base-ui/progress';\n\nconst members = [\n  {\n    src: 'https://github.com/emilkowalski.png',\n    fallback: 'EK',\n    name: 'Emil Kowalski',\n  },\n  {\n    image: 'https://github.com/raphaelsalaja.png',\n    fallback: 'RS',\n    name: 'Raphael Salaja',\n  },\n  {\n    src: 'https://github.com/raunofreiberg.png',\n    fallback: 'RF',\n    name: 'Rauno Freiberg',\n  },\n];\n\nconst Tooltip14 = () => {\n  return (\n    <HoverCard openDelay={0} closeDelay={0}>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">View Build Status</Button>\n      </HoverCardTrigger>\n\n      <HoverCardContent className=\"w-80\">\n        <div className=\"space-y-4\">\n          <div className=\"flex items-start justify-between\">\n            <div>\n              <p className=\"text-sm font-medium\">Ui System Upgrade</p>\n              <p className=\"text-muted-foreground text-xs\">\n                Improving consistency across components\n              </p>\n            </div>\n            <span className=\"text-sm font-semibold\">68%</span>\n          </div>\n\n          <Progress value={68} />\n\n          <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <div className=\"flex items-center gap-1.5\">\n              <FaCalendarAlt className=\"size-4\" />\n              <span>Started Feb 2025</span>\n            </div>\n            <span>ETA: 2 weeks</span>\n          </div>\n\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex -space-x-2\">\n              {members.map((member, i) => (\n                <Avatar key={i} className=\"ring-background size-8 ring-2\">\n                  <AvatarImage src={member.src} alt={member.name} />\n                  <AvatarFallback className=\"text-xs\">\n                    {member.fallback}\n                  </AvatarFallback>\n                </Avatar>\n              ))}\n              <Avatar className=\"ring-background size-8 ring-2\">\n                <AvatarFallback className=\"text-xs\">+3</AvatarFallback>\n              </Avatar>\n            </div>\n\n            <span className=\"text-muted-foreground text-xs\">\n              Active contributors\n            </span>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n};\n\nexport default Tooltip14;\n"
    }
  ]
}