tooltip

1"use client"
2 
3import * as React from "react"
4 
5import { Tooltip as TooltipPrimitive } from "@ark-ui/react/tooltip"
6 
7import { cn } from "@/lib/utils"
8 
9const Tooltip = TooltipPrimitive.Root
10 
11const TooltipArrow = React.forwardRef<
12  React.ElementRef<typeof TooltipPrimitive.Arrow>,
13  TooltipPrimitive.ArrowProps
14>(({ className, ...props }, ref) => (
15  <TooltipPrimitive.Arrow
16    ref={ref}
17    className={cn(
18      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
19      className
20    )}
21    {...props}
22  >
23    <TooltipPrimitive.ArrowTip className="border-t border-l" />
24  </TooltipPrimitive.Arrow>
25))
26TooltipArrow.displayName = "TooltipArrow"
27 
28const TooltipContent = React.forwardRef<
29  React.ElementRef<typeof TooltipPrimitive.Content>,
30  React.ComponentProps<typeof TooltipPrimitive.Content>
31>(({ className, ...props }, ref) => (
32  <TooltipPrimitive.Positioner>
33    <TooltipPrimitive.Content
34      ref={ref}
35      className={cn(
36        "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 relative z-50 max-w-70 animate-in rounded-md border bg-popover px-3 py-1.5 text-popover-foreground text-sm data-[state=closed]:animate-out",
37        className
38      )}
39      {...props}
40    />
41  </TooltipPrimitive.Positioner>
42))
43TooltipContent.displayName = "TooltipContent"
44 
45const TooltipContext = TooltipPrimitive.Context
46 
47const TooltipRootProvider = TooltipPrimitive.RootProvider
48 
49const TooltipTrigger = TooltipPrimitive.Trigger
50 
51export {
52  Tooltip,
53  TooltipArrow,
54  TooltipContent,
55  TooltipContext,
56  TooltipRootProvider,
57  TooltipTrigger,
58}
59 
60export {
61  useTooltip,
62  useTooltipContext,
63  type TooltipOpenChangeDetails,
64} from "@ark-ui/react/tooltip"