tooltip

1"use client"
2 
3import * as React from "react"
4import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
5import { cva, type VariantProps } from "class-variance-authority"
6import { cn } from "@/lib/utils"
7 
8const TooltipProvider = BaseTooltip.Provider
9 
10const Tooltip = BaseTooltip.Root
11 
12const TooltipTrigger = BaseTooltip.Trigger
13 
14const tooltipVariants = cva(
15    "z-50 overflow-hidden rounded-base border-2 border-black px-3 py-1.5 text-sm font-medium text-black shadow-brutal transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
16    {
17        variants: {
18            variant: {
19                default: "bg-white",
20                colored: "bg-main",
21            },
22        },
23        defaultVariants: {
24            variant: "default",
25        },
26    }
27)
28 
29type TooltipContentProps = React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup> &
30    VariantProps<typeof tooltipVariants> & {
31        sideOffset?: number
32        side?: "top" | "bottom" | "left" | "right"
33        showArrow?: boolean
34    }
35 
36const TooltipContent = React.forwardRef<
37    React.ComponentRef<typeof BaseTooltip.Popup>,
38    TooltipContentProps
39>(({ className, variant, sideOffset = 8, side = "top", showArrow = true, ...props }, ref) => (
40    <BaseTooltip.Portal>
41        <BaseTooltip.Positioner sideOffset={sideOffset} side={side}>
42            <BaseTooltip.Popup
43                ref={ref}
44                className={cn(tooltipVariants({ variant }), className)}
45                {...props}
46            />
47            {showArrow && (
48                <BaseTooltip.Arrow
49                    className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-8px] data-[side=right]:left-[-8px] data-[side=top]:bottom-[-8px]"
50                >
51                    <svg width="16" height="8" viewBox="0 0 16 8" className="fill-white stroke-black stroke-2">
52                        <polygon points="8,0 16,8 0,8" className={cn(variant === "colored" ? "fill-main" : "fill-white")} />
53                        <polyline points="0,8 8,0 16,8" fill="none" />
54                    </svg>
55                </BaseTooltip.Arrow>
56            )}
57        </BaseTooltip.Positioner>
58    </BaseTooltip.Portal>
59))
60TooltipContent.displayName = "TooltipContent"
61 
62export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipVariants }