Tooltip

1import * as React from "react";
2import {
3  View,
4  Text,
5  Pressable,
6  Modal,
7  TouchableWithoutFeedback,
8  Platform,
9  Animated,
10  StyleSheet,
11  Dimensions,
12  LayoutChangeEvent,
13} from "react-native";
14import { cn } from "@/lib/utils";
15 
16interface TooltipProps {
17  children: React.ReactNode;
18  className?: string;
19}
20 
21interface TooltipTriggerProps {
22  children: React.ReactNode;
23  className?: string;
24  disabled?: boolean;
25  asChild?: boolean;
26}
27 
28interface TooltipContentProps {
29  children: React.ReactNode;
30  className?: string;
31  align?: "start" | "center" | "end";
32  side?: "top" | "right" | "bottom" | "left";
33  sideOffset?: number;
34}
35 
36interface TooltipProviderProps {
37  children: React.ReactNode;
38}
39 
40const TooltipContext = React.createContext<{
41  open: boolean;
42  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
43  triggerRef: React.RefObject<View | null>;
44  triggerLayout: { x: number; y: number; width: number; height: number } | null;
45  setTriggerLayout: React.Dispatch<
46    React.SetStateAction<{
47      x: number;
48      y: number;
49      width: number;
50      height: number;
51    } | null>
52  >;
53}>({
54  open: false,
55  setOpen: () => { },
56  triggerRef: { current: null },
57  triggerLayout: null,
58  setTriggerLayout: () => { },
59});
60 
61const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get("window");
62 
63const TooltipProvider = React.forwardRef<View, TooltipProviderProps>(
64  ({ children }, ref) => {
65    return <View ref={ref}>{children}</View>;
66  }
67);
68 
69TooltipProvider.displayName = "TooltipProvider";
70 
71const Tooltip = React.forwardRef<View, TooltipProps>(
72  ({ children, className, ...props }, ref) => {
73    const [open, setOpen] = React.useState(false);
74    const triggerRef = React.useRef<View | null>(null);
75    const [triggerLayout, setTriggerLayout] = React.useState<{
76      x: number;
77      y: number;
78      width: number;
79      height: number;
80    } | null>(null);
81 
82    return (
83      <TooltipContext.Provider
84        value={{
85          open,
86          setOpen,
87          triggerRef,
88          triggerLayout,
89          setTriggerLayout,
90        }}
91      >
92        <View ref={ref} className={cn("", className)} {...props}>
93          {children}
94        </View>
95      </TooltipContext.Provider>
96    );
97  }
98);
99 
100Tooltip.displayName = "Tooltip";
101 
102const TooltipTrigger = React.forwardRef<View, TooltipTriggerProps>(
103  ({ children, className, disabled = false, ...props }, ref) => {
104    const { setOpen, open, triggerRef, setTriggerLayout } =
105// … truncated