snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/radix/input-group-tooltip.tsx

@@ -0,0 +1,77 @@
+import { HelpCircle, InfoIcon } from "lucide-react"
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/radix-nova/ui/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/radix-nova/ui/tooltip"
+
+export default function InputGroupTooltip() {
+  return (
+    <div className="grid w-full max-w-sm gap-4">
+      <InputGroup>
+        <InputGroupInput placeholder="Enter password" type="password" />
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <InputGroupButton
+                variant="ghost"
+                aria-label="Info"
+                size="icon-xs"
+              >
+                <InfoIcon />
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Password must be at least 8 characters</p>
+            </TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="Your email address" />
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <InputGroupButton
+                variant="ghost"
+                aria-label="Help"
+                size="icon-xs"
+              >
+                <HelpCircle />
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>We&apos;ll use this to send you notifications</p>
+            </TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="Enter API key" />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InputGroupAddon>
+              <InputGroupButton
+                variant="ghost"
+                aria-label="Help"
+                size="icon-xs"
+              >
+                <HelpCircle />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            <p>Click for help with API keys</p>
+          </TooltipContent>
+        </Tooltip>
+      </InputGroup>
+    </div>
+  )
+}