Use inline styles for tooltip colors to ensure they render

Switched from Tailwind utility classes (bg-popover, text-popover-foreground)
to inline styles with CSS custom properties. This ensures the tooltip
background, text, border, and arrow colors are applied correctly regardless
of Tailwind's utility generation.

- backgroundColor: var(--color-popover)
- color: var(--color-popover-foreground)
- borderColor: var(--color-border)
- Arrow fill: var(--color-popover)

This approach guarantees the tooltips have proper styling while still
allowing consumers to override via className or style props.

Author: kylecarbs

src/components/ui/tooltip.tsx

@@ -12,18 +12,27 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, style, ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1 text-xs 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 origin-[--radix-tooltip-content-transform-origin]",
+      "z-50 overflow-hidden rounded-md border px-2.5 py-1 text-xs 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 origin-[--radix-tooltip-content-transform-origin]",
       className
     )}
+    style={{
+      backgroundColor: "var(--color-popover)",
+      color: "var(--color-popover-foreground)",
+      borderColor: "var(--color-border)",
+      ...style,
+    }}
     {...props}
   >
     {props.children}
-    <TooltipPrimitive.Arrow className="fill-popover" />
+    <TooltipPrimitive.Arrow
+      className="drop-shadow-sm"
+      style={{ fill: "var(--color-popover)" }}
+    />
   </TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;