Add tooltip offset

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -268,6 +268,7 @@ function EventTypeSingleLayout({
                   </Skeleton>
                 )}
                 <Tooltip
+                  sideOffset={4}
                   content={
                     formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
                   }
@@ -292,7 +293,7 @@ function EventTypeSingleLayout({
             {!isManagedEventType && (
               <>
                 {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
-                <Tooltip content={t("preview")} side="bottom">
+                <Tooltip content={t("preview")} side="bottom" sideOffset={4}>
                   <Button
                     color="secondary"
                     data-testid="preview-button"
@@ -310,6 +311,7 @@ function EventTypeSingleLayout({
                   StartIcon={LinkIcon}
                   tooltip={t("copy_link")}
                   tooltipSide="bottom"
+                  tooltipOffset={4}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -322,6 +324,7 @@ function EventTypeSingleLayout({
                   variant="icon"
                   tooltip={t("embed")}
                   tooltipSide="bottom"
+                  tooltipOffset={4}
                   eventId={eventType.id}
                 />
               </>
@@ -333,6 +336,7 @@ function EventTypeSingleLayout({
                 StartIcon={Trash}
                 tooltip={t("delete")}
                 tooltipSide="bottom"
+                tooltipOffset={4}
                 disabled={!hasPermsToDelete}
                 onClick={() => setDeleteDialogOpen(true)}
               />

packages/ui/components/button/Button.tsx

@@ -24,6 +24,7 @@ export type ButtonBaseProps = {
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
   tooltipSide?: "top" | "right" | "bottom" | "left";
+  tooltipOffset?: number;
   disabled?: boolean;
   flex?: boolean;
 } & Omit<InferredVariantProps, "color"> & {
@@ -125,6 +126,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     variant = "button",
     type = "button",
     tooltipSide = "top",
+    tooltipOffset = 4,
     StartIcon,
     EndIcon,
     shallow,
@@ -215,7 +217,11 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       {element}
     </Link>
   ) : (
-    <Wrapper data-testid="wrapper" tooltip={props.tooltip} tooltipSide={tooltipSide}>
+    <Wrapper
+      data-testid="wrapper"
+      tooltip={props.tooltip}
+      tooltipSide={tooltipSide}
+      tooltipOffset={tooltipOffset}>
       {element}
     </Wrapper>
   );
@@ -225,17 +231,19 @@ const Wrapper = ({
   children,
   tooltip,
   tooltipSide,
+  tooltipOffset,
 }: {
   tooltip?: string;
   children: React.ReactNode;
   tooltipSide?: "top" | "right" | "bottom" | "left";
+  tooltipOffset?: number;
 }) => {
   if (!tooltip) {
     return <>{children}</>;
   }
 
   return (
-    <Tooltip data-testid="tooltip" content={tooltip} side={tooltipSide}>
+    <Tooltip data-testid="tooltip" content={tooltip} side={tooltipSide} sideOffset={tooltipOffset}>
       {children}
     </Tooltip>
   );