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

apps/v4/registry/bases/base/examples/tooltip-example.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import { Button } from "@/registry/bases/base/ui/button"
+import { Kbd } from "@/registry/bases/base/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/base/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function TooltipExample() {
+  return (
+    <ExampleWrapper>
+      <TooltipBasic />
+      <TooltipSides />
+      <TooltipWithIcon />
+      <TooltipLongContent />
+      <TooltipDisabled />
+      <TooltipWithKeyboard />
+      <TooltipOnLink />
+      <TooltipFormatted />
+    </ExampleWrapper>
+  )
+}
+
+function TooltipBasic() {
+  return (
+    <Example title="Basic">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Show Tooltip
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipSides() {
+  return (
+    <Example title="Sides">
+      <div className="flex flex-wrap gap-2">
+        {(
+          [
+            "inline-start",
+            "left",
+            "top",
+            "bottom",
+            "right",
+            "inline-end",
+          ] as const
+        ).map((side) => (
+          <Tooltip key={side}>
+            <TooltipTrigger
+              render={<Button variant="outline" className="w-fit capitalize" />}
+            >
+              {side.replace("-", " ")}
+            </TooltipTrigger>
+            <TooltipContent side={side}>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </Example>
+  )
+}
+
+function TooltipWithIcon() {
+  return (
+    <Example title="With Icon">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="ghost" size="icon" />}>
+          <IconPlaceholder
+            lucide="InfoIcon"
+            tabler="IconInfoCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="InfoIcon"
+            remixicon="RiInformationLine"
+          />
+          <span className="sr-only">Info</span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Additional information</p>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipLongContent() {
+  return (
+    <Example title="Long Content">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Show Tooltip
+        </TooltipTrigger>
+        <TooltipContent>
+          To learn more about how this works, check out the docs. If you have
+          any questions, please reach out to us.
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipDisabled() {
+  return (
+    <Example title="Disabled">
+      <Tooltip>
+        <TooltipTrigger render={<span className="inline-block w-fit" />}>
+          <Button variant="outline" disabled>
+            Disabled
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>This feature is currently unavailable</p>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipWithKeyboard() {
+  return (
+    <Example title="With Keyboard Shortcut">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" size="icon-sm" />}>
+          <IconPlaceholder
+            lucide="SaveIcon"
+            tabler="IconDeviceFloppy"
+            hugeicons="FloppyDiskIcon"
+            phosphor="FloppyDiskIcon"
+            remixicon="RiSaveLine"
+          />
+        </TooltipTrigger>
+        <TooltipContent>
+          Save Changes <Kbd>S</Kbd>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipOnLink() {
+  return (
+    <Example title="On Link">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <a
+              href="#"
+              className="w-fit text-sm text-primary underline-offset-4 hover:underline"
+              onClick={(e) => e.preventDefault()}
+            />
+          }
+        >
+          Learn more
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Click to read the documentation</p>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function TooltipFormatted() {
+  return (
+    <Example title="Formatted Content">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Status
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="flex flex-col gap-1">
+            <p className="font-semibold">Active</p>
+            <p className="text-xs opacity-80">Last updated 2 hours ago</p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}