Tooltip

1"use client";
2 
3import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8type TooltipProviderContract = {
9  delayDuration?: number;
10  disableHoverableContent: boolean;
11};
12 
13type TooltipRootContract = {
14  contentId: string;
15  dataState: "closed" | "delayed-open" | "instant-open";
16  delayDuration?: number;
17  dismissHandlersRef: React.RefObject<TooltipDismissHandlers>;
18  hoverStartedAtRef: React.RefObject<number | null>;
19  open: boolean;
20  portalContainer: HTMLElement | null;
21  setContentId: React.Dispatch<React.SetStateAction<string>>;
22  setPortalContainer: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
23  setTriggerDelay: React.Dispatch<React.SetStateAction<number>>;
24};
25 
26type TooltipPointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
27 
28type TooltipDismissHandlers = {
29  onEscapeKeyDown?: (event: KeyboardEvent) => void;
30  onPointerDownOutside?: (event: TooltipPointerDownOutsideEvent) => void;
31};
32 
33type CollisionBoundary =
34  | TooltipPrimitive.Positioner.Props["collisionBoundary"]
35  | null
36  | Array<Element | null>;
37type CSSPropertiesWithVariables = React.CSSProperties & {
38  [name: `--${string}`]: string | number | undefined;
39};
40type TooltipPositioningProps = Pick<
41  TooltipPrimitive.Positioner.Props,
42  | "align"
43  | "alignOffset"
44  | "arrowPadding"
45  | "collisionAvoidance"
46  | "collisionPadding"
47  | "disableAnchorTracking"
48  | "positionMethod"
49  | "side"
50  | "sideOffset"
51> & {
52  avoidCollisions?: boolean;
53  collisionBoundary?: CollisionBoundary;
54  hideWhenDetached?: boolean;
55  sticky?: "partial" | "always";
56  updatePositionStrategy?: "optimized" | "always";
57};
58 
59const tooltipCssVariables: CSSPropertiesWithVariables = {
60  "--radix-tooltip-content-available-height": "var(--available-height)",
61  "--radix-tooltip-content-available-width": "var(--available-width)",
62  "--radix-tooltip-content-transform-origin": "var(--transform-origin)",
63  "--radix-tooltip-trigger-height": "var(--anchor-height)",
64  "--radix-tooltip-trigger-width": "var(--anchor-width)",
65};
66 
67const TooltipProviderContractContext = React.createContext<TooltipProviderContract | undefined>(
68  undefined,
69);
70const TooltipRootContractContext = React.createContext<TooltipRootContract | null>(null);
71 
72function mergePopupStyle(
73  style: TooltipPrimitive.Popup.Props["style"],
74): TooltipPrimitive.Popup.Props["style"] {
75  if (typeof style === "function") {
76// … truncated