fix(tooltip): tooltip margin bug (#8461)

* fix(tooltip): tooltip margin bug * fix(tooltip): fix margin bug * fix(tooltip): fix margin bug -pt.3 * Update _tooltip.scss * update dup margin _tooltip.scss * fix(tooltip): margin bug - top alignment * fix(tooltip): margin bug - top margin left * update margin after build Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · May 3, 2021 · 92900da · 92900da
1 parent f565f27
commit 92900da
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -500,6 +500,8 @@
     }
 
     &[data-floating-menu-direction='left'] {
+      margin-left: calc(#{$spacing-03} * -1);
+
       .#{$prefix}--tooltip__caret {
         top: 50%;
         // left position has an additional space between caret and tooltip
@@ -510,6 +512,8 @@
     }
 
     &[data-floating-menu-direction='top'] {
+      margin-top: calc(#{$spacing-03} * -1);
+
       .#{$prefix}--tooltip__caret {
         top: auto;
         bottom: calc(#{$caret-size * (-1)} + 1px);
@@ -518,13 +522,19 @@
     }
 
     &[data-floating-menu-direction='right'] {
+      margin-left: $spacing-03;
+
       .#{$prefix}--tooltip__caret {
         top: 50%;
         right: auto;
         left: calc(#{$caret-size * (-1)} + 1px);
         transform: rotate(270deg) translate(50%, -50%);
       }
     }
+
+    &[data-floating-menu-direction='bottom'] {
+      margin-top: $spacing-03;
+    }
   }
 
   .#{$prefix}--tooltip__heading {
@@ -535,6 +545,7 @@
 
   .#{$prefix}--tooltip--shown {
     display: block;
+    margin-top: 0;
   }
 
   // Tooltip Definition

diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -400,7 +400,6 @@ class FloatingMenu extends React.Component {
         ...styles,
         ...positioningStyle,
         position: 'absolute',
-        margin: 0,
         opacity: 1,
       },
     });