Tooltip

1import * as React from 'react'
2import * as TooltipPrimitive from '@radix-ui/react-tooltip'
3import { cn } from '@/lib/utils'
4 
5const TooltipProvider = TooltipPrimitive.Provider
6const Tooltip         = TooltipPrimitive.Root
7const TooltipTrigger  = TooltipPrimitive.Trigger
8 
9const TooltipContent = React.forwardRef<
10  React.ElementRef<typeof TooltipPrimitive.Content>,
11  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
12>(({ className, sideOffset = 6, ...props }, ref) => (
13  <TooltipPrimitive.Portal>
14    <TooltipPrimitive.Content
15      ref={ref}
16      sideOffset={sideOffset}
17      className={cn(
18        'z-50 overflow-hidden',
19        'border border-[var(--border)]',
20        'bg-[var(--surface-raised)]',
21        'px-2.5 py-1',
22        'text-[0.7rem] font-mono uppercase tracking-widest',
23        'text-[var(--text-secondary)]',
24        'rounded-none',
25        'shadow-[0_4px_16px_#07050F99]',
26        'animate-in fade-in-0 zoom-in-95',
27        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
28        'data-[side=bottom]:slide-in-from-top-2',
29        'data-[side=left]:slide-in-from-right-2',
30        'data-[side=right]:slide-in-from-left-2',
31        'data-[side=top]:slide-in-from-bottom-2',
32        className
33      )}
34      {...props}
35    />
36  </TooltipPrimitive.Portal>
37))
38TooltipContent.displayName = TooltipPrimitive.Content.displayName
39 
40export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }