Tooltip

1"use client";
2 
3import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
4import { useMemo } from "react";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { overlayLayer } from "@/lib/recipes";
8 
9export function TooltipProvider({
10  delay = 150,
11  closeDelay = 0,
12  timeout = 500,
13  children,
14}: {
15  delay?: number;
16  closeDelay?: number;
17  timeout?: number;
18  children: React.ReactNode;
19}): React.ReactElement {
20  return (
21    <TooltipPrimitive.Provider delay={delay} closeDelay={closeDelay} timeout={timeout}>
22      {children}
23    </TooltipPrimitive.Provider>
24  );
25}
26 
27export type TooltipSide = "top" | "bottom" | "left" | "right";
28export type TooltipAlign = "start" | "center" | "end";
29 
30export interface TooltipProps {
31  children: React.ReactElement;
32  content: React.ReactNode;
33  side?: TooltipSide;
34  align?: TooltipAlign;
35  sideOffset?: number;
36  delay?: number;
37  closeDelay?: number;
38  className?: string;
39}
40 
41export function Tooltip({
42  children,
43  content,
44  side = "top",
45  align = "center",
46  sideOffset = 4,
47  delay,
48  closeDelay,
49  className,
50}: TooltipProps): React.ReactElement {
51  const handle = useMemo(() => TooltipPrimitive.createHandle(), []);
52 
53  return (
54    <>
55      <TooltipPrimitive.Trigger
56        handle={handle}
57        render={children}
58        delay={delay}
59        closeDelay={closeDelay}
60      />
61      <TooltipPrimitive.Root handle={handle}>
62        <TooltipPrimitive.Portal>
63          <TooltipPrimitive.Positioner
64            side={side}
65            align={align}
66            sideOffset={sideOffset}
67            className={overlayLayer.popup}
68          >
69            <TooltipPrimitive.Popup
70              className={cn(
71                "rounded-[var(--radius-6)] bg-layer-1 border border-hairline-soft px-2 py-1 text-mini text-ink shadow-tooltip transition-[opacity,scale] duration-[var(--duration-state)] ease-[var(--ease-standard)] data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-starting-style:scale-[0.97] data-starting-style:opacity-0",
72                className,
73              )}
74              data-slot="tooltip-content"
75            >
76              {content}
77            </TooltipPrimitive.Popup>
78          </TooltipPrimitive.Positioner>
79        </TooltipPrimitive.Portal>
80      </TooltipPrimitive.Root>
81    </>
82  );
83}
84 
85export const TooltipRoot: typeof TooltipPrimitive.Root = TooltipPrimitive.Root;
86export const TooltipTrigger: typeof TooltipPrimitive.Trigger = TooltipPrimitive.Trigger;
87// … truncated