Tooltip (Base UI)

1"use client";
2 
3import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
4import { motion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const controlCornerClassName =
10  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
11 
12const tooltipThemeClassName =
13  "[--tt-surface:#111111] [--tt-foreground:#ffffff] dark:[--tt-surface:#f6f3ec] dark:[--tt-foreground:#111111]";
14 
15const tooltipContentClassName = cn(
16  controlCornerClassName,
17  "group/tooltip pointer-events-none relative z-50 max-w-60 whitespace-normal bg-[color:var(--tt-surface)] px-3 py-1.5 font-medium text-[color:var(--tt-foreground)] text-xs leading-snug shadow-[0_4px_24px_-4px_rgba(0,0,0,0.25)]"
18);
19 
20const tooltipArrowClassName =
21  "absolute h-2 w-2 rotate-45 bg-[color:var(--tt-surface)] group-data-[side=bottom]/tooltip:-top-1 group-data-[side=left]/tooltip:top-1/2 group-data-[side=right]/tooltip:top-1/2 group-data-[side=left]/tooltip:-right-1 group-data-[side=top]/tooltip:-bottom-1 group-data-[side=bottom]/tooltip:left-1/2 group-data-[side=right]/tooltip:-left-1 group-data-[side=top]/tooltip:left-1/2 group-data-[side=bottom]/tooltip:-translate-x-1/2 group-data-[side=top]/tooltip:-translate-x-1/2 group-data-[side=left]/tooltip:-translate-y-1/2 group-data-[side=right]/tooltip:-translate-y-1/2";
22 
23type Side = "top" | "bottom" | "left" | "right";
24type TooltipTriggerElement = React.ReactElement<{
25  "aria-describedby"?: string;
26}>;
27 
28type PopupRenderProps = React.HTMLAttributes<HTMLDivElement> & {
29  children?: React.ReactNode;
30  className?: string;
31  ref?: React.Ref<HTMLDivElement>;
32  style?: React.CSSProperties;
33};
34 
35export interface TooltipProps {
36  children: TooltipTriggerElement;
37  content: string;
38  side?: Side;
39  delay?: number;
40  className?: string;
41}
42 
43const MAX_TOOLTIP_CHARACTERS = 80;
44 
45function isTooltipTriggerElement(
46  node: React.ReactNode
47): node is TooltipTriggerElement {
48  return React.isValidElement(node) && node.type !== React.Fragment;
49}
50 
51function mergeDescribedBy(...ids: Array<string | undefined>) {
52  const merged = ids.filter(Boolean).join(" ");
53 
54  return merged.length > 0 ? merged : undefined;
55}
56 
57function setRef<T>(ref: React.Ref<T> | undefined, value: T) {
58  if (typeof ref === "function") {
59    ref(value);
60    return;
61  }
62 
63  if (ref) {
64    (ref as React.MutableRefObject<T>).current = value;
65  }
66}
67 
68function resolvePopupProps(popupProps: PopupRenderProps) {
69  const {
70// … truncated