From e2a57dc43b76b325c3d37c7920148c8c95e672f3 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Tue, 26 Aug 2025 16:16:38 -0400
Subject: [PATCH] update tooltip component for tailwind 4

---
 beszel/site/src/components/ui/input-copy.tsx |  2 +-
 beszel/site/src/components/ui/tooltip.tsx    | 57 +++++++++++++-------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/beszel/site/src/components/ui/input-copy.tsx b/beszel/site/src/components/ui/input-copy.tsx
index 14b198b..47f00e7 100644
--- a/beszel/site/src/components/ui/input-copy.tsx
+++ b/beszel/site/src/components/ui/input-copy.tsx
@@ -15,7 +15,7 @@ export function InputCopy({ value, id, name }: { value: string; id: string; name
 				}
 			></div>
 			<TooltipProvider delayDuration={100} disableHoverableContent>
-				<Tooltip>
+				<Tooltip disableHoverableContent={true}>
 					<TooltipTrigger asChild>
 						<Button
 							type="button"
diff --git a/beszel/site/src/components/ui/tooltip.tsx b/beszel/site/src/components/ui/tooltip.tsx
index de2b4ce..3d90770 100644
--- a/beszel/site/src/components/ui/tooltip.tsx
+++ b/beszel/site/src/components/ui/tooltip.tsx
@@ -3,26 +3,47 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
+}
 
-const Tooltip = TooltipPrimitive.Root
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	)
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<TooltipPrimitive.Content
-		ref={ref}
-		sideOffset={sideOffset}
-		className={cn(
-			"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className
-		)}
-		{...props}
-	/>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground border animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow
+					className="bg-popover border z-50 fill-popover size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] will-change-transform"
+					style={{ clipPath: "inset(25% 0 0 25%)" }}
+				/>
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	)
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }