Tooltip

1"use client"
2
3import * as TooltipPrimitive from "@radix-ui/react-tooltip"
4
5import * as React from "react"
6
7import { cn } from "@/lib/utils"
8
9function TooltipProvider({
10  delayDuration = 0,
11  ...props
12}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
13  return (
14    <TooltipPrimitive.Provider
15      data-slot="tooltip-provider"
16      delayDuration={delayDuration}
17      {...props}
18    />
19  )
20}
21
22function Tooltip({
23  ...props
24}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
25  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
26}
27
28function TooltipTrigger({
29  ...props
30}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
31  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
32}
33
34function TooltipContent({
35  className,
36  sideOffset = 4,
37  ...props
38}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
39  return (
40    <TooltipPrimitive.Content
41      data-slot="tooltip-content"
42      sideOffset={sideOffset}
43      className={cn(
44        "z-50 overflow-hidden rounded-base border-2 border-border bg-main px-3 py-1.5 text-sm font-base text-main-foreground 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 origin-(--radix-tooltip-content-transform-origin)",
45        className,
46      )}
47      {...props}
48    />
49  )
50}
51
52export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }