Tooltip

1"use client"
2
3import * as React from "react"
4import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5import { cva, type VariantProps } from "class-variance-authority"
6import { cn } from "@/lib/utils"
7import { Kbd } from "@/components/fysk/kbd"
8
9// --- Context ---
10interface TooltipContextValue {
11    variant?: "default" | "outline" | "glass"
12    size?: "sm" | "md" | "lg"
13}
14
15const TooltipContext = React.createContext<TooltipContextValue>({})
16
17/**
18 * Global provider for Tooltips. Usually placed in the root layout.
19 */
20const TooltipProvider = TooltipPrimitive.Provider
21
22/**
23 * The Root component for a Tooltip.
24 * If you haven't wrapped your app in TooltipProvider, this component
25 * still behaves as a single-instance provider for convenience.
26 */
27const Tooltip = ({
28    children,
29    variant = "default",
30    size = "md",
31    delayDuration = 200,
32    skipDelayDuration,
33    disableHoverableContent,
34    ...props
35}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> &
36    TooltipContextValue & {
37        delayDuration?: number
38        skipDelayDuration?: number
39        disableHoverableContent?: boolean
40    }) => {
41    return (
42        <TooltipPrimitive.Provider
43            delayDuration={delayDuration}
44            skipDelayDuration={skipDelayDuration}
45            disableHoverableContent={disableHoverableContent}
46        >
47            <TooltipPrimitive.Root {...props}>
48                <TooltipContext.Provider value={{ variant, size }}>
49                    {children}
50                </TooltipContext.Provider>
51            </TooltipPrimitive.Root>
52        </TooltipPrimitive.Provider>
53    )
54}
55
56const TooltipTrigger = TooltipPrimitive.Trigger
57const TooltipPortal = TooltipPrimitive.Portal
58
59const tooltipVariants = cva(
60    "z-50 overflow-hidden rounded-lg border shadow-md 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 selection:bg-primary selection:text-primary-foreground",
61    {
62        variants: {
63            variant: {
64                default: "bg-primary text-primary-foreground border-primary",
65                outline: "bg-background border-border text-foreground",
66// … truncated