From e893dd49c80f373e4dc62d1441c1c4d2f7880d8f Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Wed, 11 Dec 2024 17:07:48 +0200
Subject: [PATCH 1/3] feat(Tooltip): be able to change max width

---
 packages/core/src/components/Tooltip/Tooltip.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index d94424bd7a..4c29b09537 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { camelCase, isFunction } from "lodash-es";
 import cx from "classnames";
-import React, { CSSProperties, isValidElement, PureComponent, ReactElement } from "react";
+import React, { CSSProperties, isValidElement, PureComponent, ReactElement, useMemo } from "react";
 import { Modifier } from "react-popper";
 import Dialog from "../Dialog/Dialog";
 import { DialogAnimationType, DialogTriggerEvent } from "../Dialog/Dialog.types";
@@ -128,6 +128,10 @@ interface TooltipBaseProps extends VibeComponentProps {
    * The icon of the tooltip next to the title
    */
   icon?: SubIcon;
+  /**
+   * Sets the max width of the Tooltip, defaults to 240px
+   */
+  maxWidth?: number;
 }
 // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately
 const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
@@ -174,7 +178,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, className, style, title, image, icon } = this.props;
+    const { theme, content, className, style, maxWidth, title, image, icon } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -196,7 +200,10 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     }
 
     return (
-      <div style={style} className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}>
+      <div
+        style={{ ...style, "--tooltip-max-width": `${maxWidth}px` } as CSSProperties}
+        className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}
+      >
         {image && <img className={styles.image} src={image} alt="" />}
         <div className={cx(styles.content)}>
           {title && (

From 7ce4b5f49f7ca1ee82f5fde771922e962f27e646 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Wed, 11 Dec 2024 17:08:37 +0200
Subject: [PATCH 2/3] chore: lint

---
 packages/core/src/components/Tooltip/Tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index 4c29b09537..64e9d948d1 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { camelCase, isFunction } from "lodash-es";
 import cx from "classnames";
-import React, { CSSProperties, isValidElement, PureComponent, ReactElement, useMemo } from "react";
+import React, { CSSProperties, isValidElement, PureComponent, ReactElement } from "react";
 import { Modifier } from "react-popper";
 import Dialog from "../Dialog/Dialog";
 import { DialogAnimationType, DialogTriggerEvent } from "../Dialog/Dialog.types";

From b995edcd6693698c16a8a0eaa79d92bfd5c0d3f7 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Wed, 11 Dec 2024 17:25:39 +0200
Subject: [PATCH 3/3] fix: null check

---
 packages/core/src/components/Tooltip/Tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index 64e9d948d1..4d08230882 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -201,7 +201,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
 
     return (
       <div
-        style={{ ...style, "--tooltip-max-width": `${maxWidth}px` } as CSSProperties}
+        style={maxWidth ? ({ ...style, "--tooltip-max-width": `${maxWidth}px` } as CSSProperties) : style}
         className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}
       >
         {image && <img className={styles.image} src={image} alt="" />}