66 lines
4.0 KiB
JSON
66 lines
4.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "tooltip-demo",
|
|
"type": "registry:ui",
|
|
"title": "Tooltip Demo",
|
|
"description": "Demo showing an animated tooltip.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/tooltip"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/components/tooltip/index.tsx",
|
|
"content": "import { Button } from '@/components/ui/button';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n type TooltipProviderProps,\n type TooltipProps,\n type TooltipContentProps,\n} from '@/components/animate-ui/components/tooltip';\nimport React from 'react';\n\ntype TooltipDemoProps = Pick<TooltipProviderProps, 'openDelay' | 'closeDelay'> &\n Pick<TooltipProps, 'side' | 'sideOffset' | 'align' | 'alignOffset'> &\n Pick<TooltipContentProps, 'arrow'>;\n\nexport const TooltipDemo = ({\n openDelay,\n closeDelay,\n side,\n sideOffset,\n align,\n alignOffset,\n arrow,\n}: TooltipDemoProps) => {\n return (\n <TooltipProvider openDelay={openDelay} closeDelay={closeDelay}>\n <div className=\"flex flex-col gap-5 justify-center items-center\">\n <div className=\"flex flex-row gap-5 border rounded-lg p-5\">\n <Tooltip\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n >\n <TooltipTrigger>\n <Button variant=\"outline\">Docs</Button>\n </TooltipTrigger>\n <TooltipContent arrow={arrow}>\n <p>Documentation</p>\n </TooltipContent>\n </Tooltip>\n <Tooltip\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n >\n <TooltipTrigger>\n <Button variant=\"outline\">API</Button>\n </TooltipTrigger>\n <TooltipContent arrow={arrow}>\n <p>API Reference</p>\n </TooltipContent>\n </Tooltip>\n <Tooltip\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n >\n <TooltipTrigger>\n <Button variant=\"outline\">Guide</Button>\n </TooltipTrigger>\n <TooltipContent arrow={arrow}>\n <p>User Guide</p>\n </TooltipContent>\n </Tooltip>\n </div>\n <div className=\"flex flex-row gap-5\">\n <Tooltip\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n >\n <TooltipTrigger>\n <Button variant=\"outline\">Repo</Button>\n </TooltipTrigger>\n <TooltipContent arrow={arrow}>\n <p>GitHub</p>\n </TooltipContent>\n </Tooltip>\n </div>\n </div>\n </TooltipProvider>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/components/tooltip.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"demoProps": {
|
|
"TooltipProvider": {
|
|
"openDelay": {
|
|
"value": 700,
|
|
"min": 0,
|
|
"max": 2000,
|
|
"step": 100
|
|
},
|
|
"closeDelay": {
|
|
"value": 300,
|
|
"min": 0,
|
|
"max": 2000,
|
|
"step": 100
|
|
}
|
|
},
|
|
"Tooltip": {
|
|
"side": {
|
|
"value": "top",
|
|
"options": {
|
|
"top": "top",
|
|
"bottom": "bottom",
|
|
"left": "left",
|
|
"right": "right"
|
|
}
|
|
},
|
|
"sideOffset": {
|
|
"value": 14
|
|
},
|
|
"align": {
|
|
"value": "center",
|
|
"options": {
|
|
"start": "start",
|
|
"center": "center",
|
|
"end": "end"
|
|
}
|
|
},
|
|
"alignOffset": {
|
|
"value": 0
|
|
}
|
|
},
|
|
"TooltipContent": {
|
|
"arrow": {
|
|
"value": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |