|
'use client' |
|
|
|
import * as React from 'react' |
|
import { |
|
type ComponentPropsWithoutRef, |
|
type ElementRef, |
|
forwardRef |
|
} from 'react' |
|
|
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip' |
|
|
|
import { cn } from '@/lib/utils' |
|
|
|
const TooltipProvider = TooltipPrimitive.Provider |
|
|
|
const Tooltip = TooltipPrimitive.Root |
|
|
|
const TooltipTrigger = TooltipPrimitive.Trigger |
|
|
|
interface TooltipContentProps |
|
extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> { |
|
type?: 'default' | 'copy' |
|
} |
|
|
|
const TooltipContent = forwardRef< |
|
ElementRef<typeof TooltipPrimitive.Content>, |
|
TooltipContentProps |
|
>(({ className, sideOffset = 4, type = 'default', ...props }, ref) => ( |
|
<TooltipPrimitive.Content |
|
ref={ref} |
|
sideOffset={sideOffset} |
|
className={cn( |
|
'z-50 overflow-hidden rounded-sm px-2 py-1 text-sm 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', |
|
type === 'default' && 'bg-primary text-accent', |
|
type === 'copy' && 'bg-custom-gradient text-primary', |
|
|
|
className |
|
)} |
|
{...props} |
|
/> |
|
)) |
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName |
|
|
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } |
|
|