From 2a6998b602ea0efea7da4d1fa26185c2b203dbcb Mon Sep 17 00:00:00 2001
From: Rivka Ungar <rivkaun@monday.com>
Date: Wed, 18 Dec 2024 19:24:13 +0200
Subject: [PATCH] feat(Tooltip): add dir prop

---
 packages/core/src/components/Tooltip/Tooltip.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index 4d08230882..8958c3ac65 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -132,6 +132,10 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Sets the max width of the Tooltip, defaults to 240px
    */
   maxWidth?: number;
+  /**
+   * Sets the text direction of the tooltip: "ltr", "rtl", or "auto"
+   */
+  dir?: "ltr" | "rtl" | "auto";
 }
 // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately
 const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
@@ -178,7 +182,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, className, style, maxWidth, title, image, icon } = this.props;
+    const { theme, content, className, style, maxWidth, title, image, icon, dir } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -203,6 +207,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
       <div
         style={maxWidth ? ({ ...style, "--tooltip-max-width": `${maxWidth}px` } as CSSProperties) : style}
         className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}
+        dir={dir}
       >
         {image && <img className={styles.image} src={image} alt="" />}
         <div className={cx(styles.content)}>