Issue 739 tooltip align fix

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN — Page Object Generator",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.15.28",
+  "version": "3.15.29",
   "icons": {
     "128": "icon128.png"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.15.28",
+  "version": "3.15.29",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

src/app/components/StatusBar.tsx

@@ -100,7 +100,7 @@ export const StatusBar = () => {
       </div>
       <Space size={[10, 0]} className="header__space">
         {isSessionUnique && <OnboardingButton />}
-        <Tooltip title={componentsTexts.StatusBarVersionReadme}>
+        <Tooltip title={componentsTexts.StatusBarVersionReadme} align={{ offset: [16, 0] }}>
           <Button
             ref={readmeRef}
             type="link"

src/common/components/breadcrumbs/breadcrumbs.less

@@ -3,18 +3,5 @@
 .jdn {
   &__breadcrumbs {
     overflow-wrap: anywhere;
-
-    & .ant-tooltip-inner {
-      max-height: 350px;
-      overflow-y: clip;
-      display: -webkit-box;
-      -webkit-line-clamp: 15;
-      -webkit-box-orient: vertical;
-    }
-
-    & .ant-tooltip {
-      word-break: break-all;
-      max-width: 100%;
-    }
   }
 }

src/common/styles/ant.less

@@ -83,3 +83,22 @@
   max-height: 104px;
   overflow-y: auto;
 }
+
+/* Tooltip */
+.ant-tooltip {
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.ant-tooltip-arrow {
+  margin-top: 6px;
+}
+
+.ant-tooltip-inner {
+  margin-top: 6px;
+  max-height: 350px;
+  overflow-y: clip;
+  display: -webkit-box;
+  -webkit-line-clamp: 15;
+  -webkit-box-orient: vertical;
+}

src/features/locators/components/LocatorCopyButton.tsx

@@ -34,7 +34,7 @@ export const LocatorCopyButton: React.FC<Props> = ({ framework, element, pageObj
   };
 
   return (
-    <Tooltip placement="bottom" title={copyTooltipTitle} align={{ offset: [0, -10] }}>
+    <Tooltip placement="bottom" title={copyTooltipTitle} align={{ offset: [0, -1] }}>
       <Button
         onClick={handleCopy}
         onMouseEnter={handleMouseEnter}

src/features/locators/styles/locator.less

@@ -73,3 +73,7 @@
       }
     }
 }
+
+.ant-tooltip-content {
+  margin-top: -1px;
+}

src/features/onboarding/components/OnboardingTooltip.tsx

@@ -12,7 +12,9 @@ export const OnboardingTooltip: FC<Props> = ({ children }) => {
   return (
     <>
       {isOnboardingOpen ? (
-        <Tooltip title="Available only after completing the onboarding">{children}</Tooltip>
+        <Tooltip placement="top" title="Available only after completing the onboarding" align={{ offset: [0, -20] }}>
+          {children}
+        </Tooltip>
       ) : (
         children
       )}

src/features/pageObjects/styles/pageObject.less

@@ -11,22 +11,16 @@
       }
 
       & .ant-tooltip {
-        max-width: calc(100% - 1px);
-        word-break: break-all;
         padding: 5px 14px;
 
         .ant-tooltip-arrow {
-          top: 5px;
+          top: 8px;
           left: 27px;
         }
       }
 
       & .ant-tooltip-inner {
-        max-height: 350px;
-        overflow-y: clip;
-        display: -webkit-box;
-        -webkit-line-clamp: 15;
-        -webkit-box-orient: vertical;
+        margin-top: 8px;
       }
     }
 
@@ -139,4 +133,4 @@
       padding: 4px 8px 4px 32px;
       width: 100%;
     }
-}
+}