/ components / ui / tooltip.tsx
tooltip.tsx
 1  "use client"
 2  
 3  import * as React from "react"
 4  import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5  
 6  import { cn } from "@/lib/utils"
 7  
 8  const TooltipProvider = TooltipPrimitive.Provider
 9  
10  const Tooltip = TooltipPrimitive.Root
11  
12  const TooltipTrigger = TooltipPrimitive.Trigger
13  
14  const TooltipContent = React.forwardRef<
15    React.ElementRef<typeof TooltipPrimitive.Content>,
16    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17  >(({ className, sideOffset = 4, ...props }, ref) => (
18    <TooltipPrimitive.Content
19      ref={ref}
20      sideOffset={sideOffset}
21      className={cn(
22        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
23        className
24      )}
25      {...props}
26    />
27  ))
28  TooltipContent.displayName = TooltipPrimitive.Content.displayName
29  
30  export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }