tooltip.tsx
1 import * as TooltipPrimitive from "@radix-ui/react-tooltip"; 2 import * as React from "react"; 3 4 import { cn } from "../../lib/utils"; 5 6 const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> = ({ 7 delayDuration = 100, 8 ...props 9 }) => <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />; 10 11 TooltipProvider.displayName = TooltipPrimitive.Provider.displayName; 12 13 const Tooltip = TooltipPrimitive.Root; 14 15 const TooltipTrigger = TooltipPrimitive.Trigger; 16 17 const TooltipContent = React.forwardRef< 18 React.ElementRef<typeof TooltipPrimitive.Content>, 19 React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> 20 >(({ className, sideOffset = 4, ...props }, ref) => ( 21 <TooltipPrimitive.Content 22 ref={ref} 23 sideOffset={sideOffset} 24 className={cn( 25 "z-50 overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-slate-50 dark:text-slate-900", 26 className, 27 )} 28 {...props} 29 /> 30 )); 31 TooltipContent.displayName = TooltipPrimitive.Content.displayName; 32 33 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };