diff --git a/src/components/primitives/Tooltip.tsx b/src/components/primitives/Tooltip.tsx
index 3636d5c12..f0bfc4e31 100644
--- a/src/components/primitives/Tooltip.tsx
+++ b/src/components/primitives/Tooltip.tsx
@@ -7,9 +7,10 @@ import Icon from "./Icon";
 export type TooltipProps = Component<{
   helper: string | React.ReactNode;
   icon?: boolean;
+  className?: string;
 }>;
 
-export default function Tooltip({ helper, children, icon = true }: TooltipProps) {
+export default function Tooltip({ helper, children, icon = true, className }: TooltipProps) {
   const { vars } = useTheme();
 
   return (
@@ -24,7 +25,7 @@ export default function Tooltip({ helper, children, icon = true }: TooltipProps)
         <RadixTooltip.Portal>
           <RadixTooltip.Content
             style={vars}
-            className="select-none rounded-md bg-main-1 px-lg py-md z-30 leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade max-w-[90vw] md:max-w-[70vw] lg:max-w-[40vw] xl:max-w-[30vw]"
+            className={`${className} select-none rounded-md bg-main-1 px-lg py-md z-30 leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade max-w-[90vw] md:max-w-[70vw] lg:max-w-[40vw] xl:max-w-[30vw]`}
             sideOffset={5}>
             <Text size="sm" className="text-main-12">
               {helper}