tooltip

1import * as React from "react"
2import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./tooltip.css"
7 
8const tooltipContentVariants = cva(
9  "tooltip-content z-50 flex items-center overflow-hidden font-accent 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",
10  {
11    variants: {
12      size: {
13        md: "max-w-40 gap-[var(--layout-gap-sm)] p-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note",
14        sm: "max-w-40 gap-[var(--layout-gap-sm)] p-[var(--layout-padding-sm)] rounded-[var(--layout-radius-lg)] text-content-caption",
15      },
16    },
17    defaultVariants: {
18      size: "md",
19    },
20  }
21)
22 
23function TooltipProvider({
24  delayDuration = 300,
25  ...props
26}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
27  return (
28    <TooltipPrimitive.Provider
29      data-slot="tooltip-provider"
30      delayDuration={delayDuration}
31      {...props}
32    />
33  )
34}
35 
36function Tooltip({
37  ...props
38}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
39  return <TooltipPrimitive.Root {...props} />
40}
41 
42function TooltipTrigger({
43  ...props
44}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
45  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
46}
47 
48function TooltipContent({
49  className,
50  size,
51  sideOffset = 6,
52  children,
53  ...props
54}: React.ComponentProps<typeof TooltipPrimitive.Content> &
55  VariantProps<typeof tooltipContentVariants>) {
56  return (
57    <TooltipPrimitive.Portal>
58      <TooltipPrimitive.Content
59        data-slot="tooltip-content"
60        sideOffset={sideOffset}
61        className={cn(tooltipContentVariants({ size, className }))}
62        {...props}
63      >
64        {children}
65      </TooltipPrimitive.Content>
66    </TooltipPrimitive.Portal>
67  )
68}
69 
70function TooltipShortcut({
71  className,
72  ...props
73}: React.ComponentProps<"kbd">) {
74  return (
75    <kbd
76      data-slot="tooltip-shortcut"
77      className={cn("tooltip-shortcut h-[var(--layout-size-sm)] shrink-0 text-content-caption", className)}
78      {...props}
79    />
80  )
81}
82 
83export {
84  Tooltip,
85  TooltipTrigger,
86  TooltipContent,
87  TooltipProvider,
88  TooltipShortcut,
89  tooltipContentVariants,
90}