{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "A tooltip component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/tooltip/tooltip.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Text,\n  Pressable,\n  Modal,\n  TouchableWithoutFeedback,\n  Platform,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  LayoutChangeEvent,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TooltipProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface TooltipTriggerProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  asChild?: boolean;\n}\n\ninterface TooltipContentProps {\n  children: React.ReactNode;\n  className?: string;\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  sideOffset?: number;\n}\n\ninterface TooltipProviderProps {\n  children: React.ReactNode;\n}\n\nconst TooltipContext = React.createContext<{\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  triggerRef: React.RefObject<View | null>;\n  triggerLayout: { x: number; y: number; width: number; height: number } | null;\n  setTriggerLayout: React.Dispatch<\n    React.SetStateAction<{\n      x: number;\n      y: number;\n      width: number;\n      height: number;\n    } | null>\n  >;\n}>({\n  open: false,\n  setOpen: () => { },\n  triggerRef: { current: null },\n  triggerLayout: null,\n  setTriggerLayout: () => { },\n});\n\nconst { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get(\"window\");\n\nconst TooltipProvider = React.forwardRef<View, TooltipProviderProps>(\n  ({ children }, ref) => {\n    return <View ref={ref}>{children}</View>;\n  }\n);\n\nTooltipProvider.displayName = \"TooltipProvider\";\n\nconst Tooltip = React.forwardRef<View, TooltipProps>(\n  ({ children, className, ...props }, ref) => {\n    const [open, setOpen] = React.useState(false);\n    const triggerRef = React.useRef<View | null>(null);\n    const [triggerLayout, setTriggerLayout] = React.useState<{\n      x: number;\n      y: number;\n      width: number;\n      height: number;\n    } | null>(null);\n\n    return (\n      <TooltipContext.Provider\n        value={{\n          open,\n          setOpen,\n          triggerRef,\n          triggerLayout,\n          setTriggerLayout,\n        }}\n      >\n        <View ref={ref} className={cn(\"\", className)} {...props}>\n          {children}\n        </View>\n      </TooltipContext.Provider>\n    );\n  }\n);\n\nTooltip.displayName = \"Tooltip\";\n\nconst TooltipTrigger = React.forwardRef<View, TooltipTriggerProps>(\n  ({ children, className, disabled = false, ...props }, ref) => {\n    const { setOpen, open, triggerRef, setTriggerLayout } =\n      React.useContext(TooltipContext);\n\n    const measureTrigger = () => {\n      if (triggerRef.current) {\n        triggerRef.current.measureInWindow((x, y, width, height) => {\n          setTriggerLayout({ x, y, width, height });\n        });\n      }\n    };\n\n    const handlePress = () => {\n      if (disabled) return;\n      measureTrigger();\n      setOpen(!open);\n    };\n\n    return (\n      <Pressable\n        ref={(node) => {\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n          triggerRef.current = node;\n        }}\n        className={cn(\"\", className)}\n        disabled={disabled}\n        onPress={handlePress}\n        accessibilityRole=\"button\"\n        {...props}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n);\n\nTooltipTrigger.displayName = \"TooltipTrigger\";\n\nconst TooltipContent = React.forwardRef<View, TooltipContentProps>(\n  (\n    {\n      children,\n      className,\n      align = \"center\",\n      side = \"bottom\",\n      sideOffset = 8,\n      ...props\n    },\n    ref\n  ) => {\n    const { open, setOpen, triggerLayout } = React.useContext(TooltipContext);\n    const opacityAnim = React.useRef(new Animated.Value(0)).current;\n    const offsetAnim = React.useRef(new Animated.Value(0)).current;\n    const scaleAnim = React.useRef(new Animated.Value(0.92)).current;\n    const [contentSize, setContentSize] = React.useState<{\n      width: number;\n      height: number;\n    }>({\n      width:\n        side === \"left\" || side === \"right\"\n          ? Math.min(150, WINDOW_WIDTH / 3)\n          : 200,\n      height: 60,\n    });\n\n    const handleContentLayout = (e: LayoutChangeEvent) => {\n      const { width, height } = e.nativeEvent.layout;\n      if (width > 0 && height > 0) {\n        if (side === \"left\" || side === \"right\") {\n          setContentSize({\n            width: Math.min(width, WINDOW_WIDTH / 3),\n            height,\n          });\n        } else {\n          setContentSize({ width, height });\n        }\n      }\n    };\n\n    React.useEffect(() => {\n      if (open) {\n        opacityAnim.setValue(0);\n        scaleAnim.setValue(0.92);\n\n        switch (side) {\n          case \"top\":\n            offsetAnim.setValue(8);\n            break;\n          case \"bottom\":\n            offsetAnim.setValue(-8);\n            break;\n          case \"left\":\n            offsetAnim.setValue(8);\n            break;\n          case \"right\":\n            offsetAnim.setValue(-8);\n            break;\n        }\n\n        Animated.parallel([\n          Animated.timing(opacityAnim, {\n            toValue: 1,\n            duration: 220,\n            useNativeDriver: true,\n          }),\n          Animated.timing(scaleAnim, {\n            toValue: 1,\n            duration: 220,\n            useNativeDriver: true,\n          }),\n          Animated.timing(offsetAnim, {\n            toValue: 0,\n            duration: 220,\n            useNativeDriver: true,\n          }),\n        ]).start();\n\n        const timer = setTimeout(() => handleClose(), 4000);\n        return () => clearTimeout(timer);\n      }\n    }, [open, side]);\n\n    const handleClose = () => {\n      let targetOffset = 0;\n\n      switch (side) {\n        case \"top\":\n          targetOffset = -8;\n          break;\n        case \"bottom\":\n          targetOffset = 8;\n          break;\n        case \"left\":\n          targetOffset = -8;\n          break;\n        case \"right\":\n          targetOffset = 8;\n          break;\n      }\n\n      Animated.parallel([\n        Animated.timing(opacityAnim, {\n          toValue: 0,\n          duration: 150,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 0.92,\n          duration: 150,\n          useNativeDriver: true,\n        }),\n        Animated.timing(offsetAnim, {\n          toValue: targetOffset,\n          duration: 150,\n          useNativeDriver: true,\n        }),\n      ]).start(() => {\n        setOpen(false);\n      });\n    };\n\n    if (!open) return null;\n\n    const getPosition = () => {\n      if (!triggerLayout) {\n        return {\n          left: WINDOW_WIDTH / 2 - contentSize.width / 2,\n          top: WINDOW_HEIGHT / 2 - contentSize.height / 2,\n        };\n      }\n\n      let left = 0;\n      let top = 0;\n\n      if (side === \"top\" || side === \"bottom\") {\n        if (align === \"start\") {\n          left = triggerLayout.x;\n        } else if (align === \"center\") {\n          left =\n            triggerLayout.x + triggerLayout.width / 2 - contentSize.width / 2;\n        } else if (align === \"end\") {\n          left = triggerLayout.x + triggerLayout.width - contentSize.width;\n        }\n      }\n\n      if (side === \"left\" || side === \"right\") {\n        if (align === \"start\") {\n          top = triggerLayout.y;\n        } else if (align === \"center\") {\n          top =\n            triggerLayout.y + triggerLayout.height / 2 - contentSize.height / 2;\n        } else if (align === \"end\") {\n          top = triggerLayout.y + triggerLayout.height - contentSize.height;\n        }\n      }\n\n      if (side === \"top\") {\n        top = triggerLayout.y - contentSize.height - sideOffset;\n      } else if (side === \"bottom\") {\n        top = triggerLayout.y + triggerLayout.height + sideOffset;\n      } else if (side === \"left\") {\n        left = triggerLayout.x - contentSize.width - sideOffset;\n      } else if (side === \"right\") {\n        left = triggerLayout.x + triggerLayout.width + sideOffset;\n      }\n\n      left = Math.max(\n        16,\n        Math.min(left, WINDOW_WIDTH - contentSize.width - 16)\n      );\n      top = Math.max(\n        50,\n        Math.min(top, WINDOW_HEIGHT - contentSize.height - 16)\n      );\n\n      return { left, top };\n    };\n\n    const getTransform = () => {\n      const scale = { scale: scaleAnim };\n\n      if (side === \"top\" || side === \"bottom\") {\n        return [scale, { translateY: offsetAnim }];\n      } else {\n        return [scale, { translateX: offsetAnim }];\n      }\n    };\n\n    return (\n      <Modal\n        visible={open}\n        transparent\n        animationType=\"none\"\n        statusBarTranslucent={true}\n        onRequestClose={handleClose}\n      >\n        <TouchableWithoutFeedback onPress={handleClose}>\n          <View style={StyleSheet.absoluteFill}>\n            <Animated.View\n              onLayout={handleContentLayout}\n              style={[\n                styles.tooltipContent,\n                getPosition(),\n                {\n                  maxWidth:\n                    side === \"left\" || side === \"right\"\n                      ? WINDOW_WIDTH / 3\n                      : WINDOW_WIDTH - 32,\n                  opacity: opacityAnim,\n                  transform: getTransform(),\n                },\n              ]}\n              className={cn(\n                \"rounded-md bg-primary px-4 py-2\",\n                \"min-w-[150px]\",\n                Platform.OS === \"ios\" ? \"ios:shadow-md\" : \"android:elevation-3\",\n                className\n              )}\n              {...props}\n            >\n              <View>\n                {typeof children === \"string\" ? (\n                  <Text className=\"text-primary-foreground text-sm font-medium\">\n                    {children}\n                  </Text>\n                ) : (\n                  children\n                )}\n              </View>\n            </Animated.View>\n          </View>\n        </TouchableWithoutFeedback>\n      </Modal>\n    );\n  }\n);\n\nTooltipContent.displayName = \"TooltipContent\";\n\nconst styles = StyleSheet.create({\n  tooltipContent: {\n    position: \"absolute\",\n    zIndex: 1000,\n  },\n});\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tootlip\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function TooltipExample() {\n    return (\n        <TooltipProvider>\n            <Tooltip>\n                <TooltipTrigger className=\"bg-primary py-3 px-4 rounded-md\">\n                    <Text className=\"text-primary-foreground font-medium\">\n                        Press me\n                    </Text>\n                </TooltipTrigger>\n                <TooltipContent>\n                    <Text className=\"text-primary-foreground font-medium\">\n                        This is a basic tooltip\n                    </Text>\n                </TooltipContent>\n            </Tooltip>\n        </TooltipProvider>\n    );\n}\n",
  "customPreview": "import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tootlip\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport { KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function TooltipExample() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView className=\"p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Tooltip\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                A popup that displays information related to an element when the element receives keyboard focus or when the mouse hovers over it.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Basic Tooltip\n                            </Text>\n                            <View className=\"items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-primary py-3 px-4 rounded-md\">\n                                            <Text className=\"text-primary-foreground font-medium\">\n                                                Press me\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <Text className=\"text-primary-foreground font-medium\">\n                                                This is a basic tooltip\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Different Sides\n                            </Text>\n\n                            <View className=\"mb-6 items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-secondary py-3 px-4 rounded-md\">\n                                            <Text className=\"text-secondary-foreground font-medium\">\n                                                Tooltip Top\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent side=\"top\">\n                                            <Text className=\"text-primary-foreground\">\n                                                This tooltip appears on top\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n\n                            <View className=\"mb-6 items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-secondary py-3 px-4 rounded-md\">\n                                            <Text className=\"text-secondary-foreground font-medium\">\n                                                Tooltip Right\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent side=\"right\">\n                                            <Text className=\"text-primary-foreground\">\n                                                This tooltip appears on the right\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n\n                            <View className=\"mb-6 items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-secondary py-3 px-4 rounded-md\">\n                                            <Text className=\"text-secondary-foreground font-medium\">\n                                                Tooltip Left\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent side=\"left\">\n                                            <Text className=\"text-primary-foreground\">\n                                                This tooltip appears on the left\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Different Alignments\n                            </Text>\n\n                            <View className=\"flex-row justify-between mb-4\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-accent py-3 px-4 rounded-md\">\n                                            <Text className=\"text-accent-foreground font-medium\">\n                                                Start Aligned\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent align=\"start\">\n                                            <Text className=\"text-primary-foreground\">\n                                                This tooltip is aligned to the start\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-accent py-3 px-4 rounded-md\">\n                                            <Text className=\"text-accent-foreground font-medium\">\n                                                End Aligned\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent align=\"end\">\n                                            <Text className=\"text-primary-foreground\">\n                                                This tooltip is aligned to the end\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Icons\n                            </Text>\n                            <View className=\"flex-row justify-around\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"w-12 h-12 bg-muted rounded-full items-center justify-center\">\n                                            <Ionicons name=\"help-outline\" size={24} color=\"#666\" />\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <Text className=\"text-primary-foreground\">\n                                                Need help? Contact support\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"w-12 h-12 bg-muted rounded-full items-center justify-center\">\n                                            <Ionicons name=\"information-circle-outline\" size={24} color=\"#666\" />\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <Text className=\"text-primary-foreground\">\n                                                Important information\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"w-12 h-12 bg-muted rounded-full items-center justify-center\">\n                                            <Ionicons name=\"notifications-outline\" size={24} color=\"#666\" />\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <Text className=\"text-primary-foreground\">\n                                                You have 3 new notifications\n                                            </Text>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Custom Content\n                            </Text>\n                            <View className=\"items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-primary py-3 px-4 rounded-md\">\n                                            <Text className=\"text-primary-foreground font-medium\">\n                                                User Profile\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent className=\"p-0\">\n                                            <View className=\"p-4\">\n                                                <View className=\"flex-row items-center mb-3\">\n                                                    <View className=\"w-10 h-10 rounded-full bg-muted items-center justify-center mr-3\">\n                                                        <Text className=\"text-muted-foreground font-bold\">JD</Text>\n                                                    </View>\n                                                    <View>\n                                                        <Text className=\"text-primary-foreground font-bold\">John Doe</Text>\n                                                        <Text className=\"text-primary-foreground opacity-70 text-xs\">\n                                                            john.doe@example.com\n                                                        </Text>\n                                                    </View>\n                                                </View>\n                                                <View className=\"h-px bg-primary-foreground opacity-20 my-2\" />\n                                                <Text className=\"text-primary-foreground text-sm\">\n                                                    Online since 2 hours ago\n                                                </Text>\n                                            </View>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Interactive Elements in Tooltip\n                            </Text>\n                            <View className=\"items-center\">\n                                <TooltipProvider>\n                                    <Tooltip>\n                                        <TooltipTrigger className=\"bg-destructive py-3 px-4 rounded-md\">\n                                            <Text className=\"text-destructive-foreground font-medium\">\n                                                Delete Item\n                                            </Text>\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <View>\n                                                <Text className=\"text-primary-foreground font-medium mb-3\">\n                                                    Are you sure you want to delete?\n                                                </Text>\n                                                <Text className=\"text-primary-foreground opacity-70 text-sm mb-3\">\n                                                    This action cannot be undone.\n                                                </Text>\n                                                <View className=\"flex-row justify-end\">\n                                                    <Pressable\n                                                        className=\"bg-primary-foreground py-1 px-3 rounded-md mr-2\"\n                                                        onPress={() => console.log(\"Cancelled delete\")}\n                                                    >\n                                                        <Text className=\"text-primary text-sm font-medium\">Cancel</Text>\n                                                    </Pressable>\n                                                    <Pressable\n                                                        className=\"bg-destructive py-1 px-3 rounded-md\"\n                                                        onPress={() => console.log(\"Confirmed delete\")}\n                                                    >\n                                                        <Text className=\"text-destructive-foreground text-sm font-medium\">Delete</Text>\n                                                    </Pressable>\n                                                </View>\n                                            </View>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                </TooltipProvider>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Feature Highlight Tooltip\n                            </Text>\n                            <View className=\"items-center bg-card p-6 rounded-md border border-border\">\n                                <Text className=\"text-foreground mb-4\">Dashboard Overview</Text>\n\n                                <View className=\"flex-row justify-around w-full mb-4\">\n                                    <TooltipProvider>\n                                        <Tooltip>\n                                            <TooltipTrigger className=\"items-center\">\n                                                <View className=\"w-16 h-16 rounded-md bg-primary/20 items-center justify-center mb-2\">\n                                                    <Ionicons name=\"analytics-outline\" size={24} color=\"#666\" />\n                                                </View>\n                                                <Text className=\"text-foreground text-xs\">Analytics</Text>\n                                            </TooltipTrigger>\n                                            <TooltipContent>\n                                                <Text className=\"text-primary-foreground\">\n                                                    View detailed analytics and reports\n                                                </Text>\n                                            </TooltipContent>\n                                        </Tooltip>\n                                    </TooltipProvider>\n\n                                    <TooltipProvider>\n                                        <Tooltip>\n                                            <TooltipTrigger className=\"items-center\">\n                                                <View className=\"w-16 h-16 rounded-md bg-primary/20 items-center justify-center mb-2\">\n                                                    <Ionicons name=\"people-outline\" size={24} color=\"#666\" />\n                                                </View>\n                                                <Text className=\"text-foreground text-xs\">Users</Text>\n                                            </TooltipTrigger>\n                                            <TooltipContent side=\"top\">\n                                                <Text className=\"text-primary-foreground\">\n                                                    Manage your team members and permissions\n                                                </Text>\n                                            </TooltipContent>\n                                        </Tooltip>\n                                    </TooltipProvider>\n\n                                    <TooltipProvider>\n                                        <Tooltip>\n                                            <TooltipTrigger className=\"items-center\">\n                                                <View className=\"w-16 h-16 rounded-md bg-primary/20 items-center justify-center mb-2\">\n                                                    <Ionicons name=\"settings-outline\" size={24} color=\"#666\" />\n                                                </View>\n                                                <Text className=\"text-foreground text-xs\">Settings</Text>\n                                            </TooltipTrigger>\n                                            <TooltipContent>\n                                                <Text className=\"text-primary-foreground\">\n                                                    Configure account settings and preferences\n                                                </Text>\n                                            </TooltipContent>\n                                        </Tooltip>\n                                    </TooltipProvider>\n                                </View>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Form Field Tooltip Help\n                            </Text>\n                            <View className=\"bg-card p-4 rounded-md border border-border\">\n                                <View className=\"mb-4\">\n                                    <View className=\"flex-row items-center mb-2\">\n                                        <Text className=\"text-foreground font-medium mr-2\">Password</Text>\n                                        <TooltipProvider>\n                                            <Tooltip>\n                                                <TooltipTrigger>\n                                                    <Ionicons name=\"help-circle-outline\" size={16} color=\"#666\" />\n                                                </TooltipTrigger>\n                                                <TooltipContent side=\"top\">\n                                                    <View>\n                                                        <Text className=\"text-primary-foreground font-medium mb-2\">Password Requirements:</Text>\n                                                        <Text className=\"text-primary-foreground text-sm\">• At least 8 characters</Text>\n                                                        <Text className=\"text-primary-foreground text-sm\">• Include one uppercase letter</Text>\n                                                        <Text className=\"text-primary-foreground text-sm\">• Include one number</Text>\n                                                        <Text className=\"text-primary-foreground text-sm\">• Include one special character</Text>\n                                                    </View>\n                                                </TooltipContent>\n                                            </Tooltip>\n                                        </TooltipProvider>\n                                    </View>\n\n                                    <View className=\"h-10 bg-input rounded-md border border-input px-3 mb-1\" />\n\n                                    <Text className=\"text-muted-foreground text-xs\">\n                                        Your password must be at least 8 characters\n                                    </Text>\n                                </View>\n\n                                <Pressable className=\"bg-primary py-2 rounded-md items-center\">\n                                    <Text className=\"text-primary-foreground font-medium\">Create Account</Text>\n                                </Pressable>\n                            </View>\n                        </View>\n\n                        {/* Extra padding to ensure good scroll */}\n                        <View className=\"h-20\" />\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}