Tooltip

1"use client";
2 
3import * as React from "react";
4import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 
6import { cn } from "@/lib/utils";
7import {
8  floatingMotion,
9  floatingSurfaceVariants,
10  type FloatingSurfaceProps,
11} from "@/components/ui/recipes";
12 
13const TooltipProvider = TooltipPrimitive.Provider;
14 
15const Tooltip = TooltipPrimitive.Root;
16 
17const TooltipTrigger = TooltipPrimitive.Trigger;
18 
19const TooltipContent = React.forwardRef<
20  React.ElementRef<typeof TooltipPrimitive.Content>,
21  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
22    FloatingSurfaceProps & { size?: "sm" | "md" }
23>(
24  (
25    {
26      className,
27      sideOffset = 6,
28      collisionPadding = 8,
29      surface = "solid",
30      radius,
31      size = "sm",
32      style,
33      ...props
34    },
35    ref,
36  ) => (
37    <TooltipPrimitive.Portal>
38      <TooltipPrimitive.Content
39        ref={ref}
40        sideOffset={sideOffset}
41        collisionPadding={collisionPadding}
42        style={
43          {
44            "--poyraz-floating-transform-origin": "var(--radix-tooltip-content-transform-origin)",
45            "--poyraz-floating-slide": "var(--poyraz-floating-slide-distance, 0.375rem)",
46            ...style,
47          } as React.CSSProperties
48        }
49        className={cn(
50          floatingSurfaceVariants({ surface, radius }),
51          floatingMotion,
52          "z-50 max-w-xs",
53          size === "sm" && "px-2.5 py-1.5 text-xs",
54          size === "md" && "px-3 py-2 text-sm",
55          className,
56        )}
57        {...props}
58      />
59    </TooltipPrimitive.Portal>
60  ),
61);
62TooltipContent.displayName = TooltipPrimitive.Content.displayName;
63 
64export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };