/ src / components / ui / tooltip.tsx
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 };