EPMRPP-78410 || fix: add new position for tooltip. Add new placement …

…data attribuite
reportportal · Jul 14, 2022 · ee5de5d · ee5de5d
1 parent fccb0fb
commit ee5de5d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/app/src/components/main/tooltips/tooltip/tooltip.scss b/app/src/components/main/tooltips/tooltip/tooltip.scss
@@ -41,6 +41,10 @@ $ARROW_WIDTH: 16px;
     padding-left: $ARROW_HEIGHT;
   }
 
+  &[data-placement*='top-quarter-left'] {
+    padding-left: $ARROW_HEIGHT;
+  }
+
   &.no-mobile {
     @media (max-width: $SCREEN_XS_MAX) {
       display: none;
@@ -164,6 +168,29 @@ $ARROW_WIDTH: 16px;
       border-color: transparent $COLOR--white-two transparent transparent;
     }
   }
+
+  &[data-placement*='top-quarter-left'] {
+    bottom: 0;
+    width: $ARROW_WIDTH;
+    height: $ARROW_HEIGHT;
+
+    &::before,
+    &::after {
+      border-width: $ARROW_HEIGHT $ARROW_WIDTH/2 0;
+    }
+
+    &::before {
+      position: absolute;
+      right: 118px;
+      border-color: $COLOR--gray-80 transparent transparent;
+    }
+
+    &::after {
+      right: 120px;
+      bottom: 1px;
+      border-color: $COLOR--white-two transparent transparent;
+    }
+  }
 }
 
 .dark {

diff --git a/...nPage/pageBlocks/serviceVersionsBlock/serviceVersionBlockTooltip/serviceVersionsBlock.jsx b/...nPage/pageBlocks/serviceVersionsBlock/serviceVersionBlockTooltip/serviceVersionsBlock.jsx
@@ -104,7 +104,8 @@ export const ServiceVersionItemTooltip = withTooltip({
   TooltipComponent: ServiceVersionsBlockWithTooltip,
   data: {
     dynamicWidth: true,
-    placement: 'top',
+    leftOffset: 120,
+    placement: 'top-quarter-left',
     tooltipTriggerClass: cx('tooltip-trigger-block'),
   },
 })(ServiceVersionsBlock);