{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-10",
  "type": "registry:component",
  "title": "Tooltip 10",
  "description": "Tooltip 10. A small popup that appears when a user hovers over or focuses on an element, providing additional information or context.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "tooltip"
  ],
  "files": [
    {
      "path": "components/watermelon/tooltip-10.tsx",
      "type": "registry:component",
      "content": "import {\n  MdChevronLeft,\n  MdKeyboardArrowUp,\n  MdKeyboardArrowDown,\n  MdChevronRight,\n} from 'react-icons/md';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/components/base-ui/tooltip';\n\nconst Tooltip10 = () => {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            <MdChevronLeft className=\"size-4\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"left\">Tooltip on left</TooltipContent>\n      </Tooltip>\n\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            <MdKeyboardArrowUp className=\"size-4\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"top\">Tooltip on top</TooltipContent>\n      </Tooltip>\n\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            <MdKeyboardArrowDown className=\"size-4\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">Tooltip on bottom</TooltipContent>\n      </Tooltip>\n\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            <MdChevronRight className=\"size-4\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">Tooltip on right</TooltipContent>\n      </Tooltip>\n    </div>\n  );\n};\n\nexport default Tooltip10;\n"
    }
  ]
}