Tooltip

1'use client';
2 
3import {
4  Arrow,
5  Content,
6  Portal,
7  Provider,
8  Root,
9  Trigger,
10} from '@radix-ui/react-tooltip';
11import { cn } from '@/lib/classnames';
12import type { ComponentProps } from 'react';
13 
14function TooltipProvider({
15  delayDuration = 0,
16  ...props
17}: ComponentProps<typeof Provider>) {
18  return (
19    <Provider
20      data-slot='tooltip-provider'
21      delayDuration={delayDuration}
22      {...props}
23    />
24  );
25}
26 
27function TooltipRoot({ ...props }: ComponentProps<typeof Root>) {
28  return (
29    <TooltipProvider>
30      <Root data-slot='tooltip' {...props} />
31    </TooltipProvider>
32  );
33}
34 
35function TooltipTrigger({ ...props }: ComponentProps<typeof Trigger>) {
36  return <Trigger data-slot='tooltip-trigger' {...props} />;
37}
38 
39function TooltipContent({
40  className,
41  sideOffset = 0,
42  children,
43  ...props
44}: ComponentProps<typeof Content>) {
45  return (
46    <Portal>
47      <Content
48        className={cn(
49          'fade-in-0 zoom-in-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=closed]:animate-out',
50          className,
51        )}
52        data-slot='tooltip-content'
53        sideOffset={sideOffset}
54        {...props}
55      >
56        {children}
57        <Arrow className='z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground' />
58      </Content>
59    </Portal>
60  );
61}
62 
63const Tooltip = Object.assign(TooltipRoot, {
64  Trigger: TooltipTrigger,
65  Content: TooltipContent,
66});
67 
68export { Tooltip, TooltipProvider };