Tooltip

1"use client";
2 
3import * as React from "react";
4import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
5import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
6 
7import { cn } from "@/lib/utils";
8 
9type TooltipMode = "tooltip" | "popover";
10 
11const DESKTOP_TOOLTIP_QUERY =
12  "(hover: hover) and (pointer: fine) and (min-width: 1024px)";
13 
14const TOOLTIP_CONTENT_CLASSNAME =
15  "bg-foreground text-background z-50 w-fit origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs text-balance transition-[transform,scale,opacity] data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0";
16 
17const TOOLTIP_ARROW_CLASSNAME =
18  "bg-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]";
19 
20const TooltipModeContext = React.createContext<TooltipMode>("tooltip");
21 
22function getTooltipMode(query: MediaQueryList): TooltipMode {
23  return query.matches ? "tooltip" : "popover";
24}
25 
26function useTooltipMode(): TooltipMode {
27  const [mode, setMode] = React.useState<TooltipMode>("tooltip");
28 
29  React.useEffect(() => {
30    const query = window.matchMedia(DESKTOP_TOOLTIP_QUERY);
31    const updateMode = () => setMode(getTooltipMode(query));
32 
33    updateMode();
34    query.addEventListener("change", updateMode);
35 
36    return () => query.removeEventListener("change", updateMode);
37  }, []);
38 
39  return mode;
40}
41 
42function TooltipProvider({
43  delayDuration = 0,
44  ...props
45}: Omit<TooltipPrimitive.Provider.Props, "delay"> & {
46  delayDuration?: number;
47}) {
48  return <TooltipPrimitive.Provider delay={delayDuration} {...props} />;
49}
50 
51function Tooltip({
52  children,
53  open,
54  defaultOpen,
55  onOpenChange,
56  delayDuration,
57  disableHoverableContent,
58  ...props
59}: Omit<TooltipPrimitive.Root.Props, "onOpenChange"> & {
60  onOpenChange?: (open: boolean) => void;
61  delayDuration?: number;
62  disableHoverableContent?: boolean;
63}) {
64  const mode = useTooltipMode();
65 
66  return (
67    <TooltipModeContext.Provider value={mode}>
68      {mode === "tooltip" ? (
69        <TooltipProvider delayDuration={delayDuration}>
70          <TooltipPrimitive.Root
71            open={open}
72            defaultOpen={defaultOpen}
73            onOpenChange={onOpenChange}
74            disableHoverablePopup={disableHoverableContent}
75            {...props}
76          >
77            {children}
78          </TooltipPrimitive.Root>
79        </TooltipProvider>
80      ) : (
81        <PopoverPrimitive.Root
82          open={open}
83// … truncated