tooltip-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-example",
  "title": "Tooltip",
  "registryDependencies": [
    "button",
    "kbd",
    "tooltip",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-mira/examples/tooltip-example.tsx",
      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}