Fix tooltip hover (#1128)

Author: mdodgelooker

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Major CSS linting clean-up
 - `CheckboxGroup` & `RadioGroup` options now properly wrap when the exceed the container width
 - `Select` & `SelectMulti` option group label alignment
+- `Tooltip` closing when mouse moves from trigger element to tooltip
 
 ### Removed
 

packages/components/src/Overlay/OverlaySurface.tsx

@@ -114,6 +114,7 @@ const Outer = styled.div<{ zIndex?: number }>`
   ${reset}
   animation: ${fadeIn} 150ms ease-in;
   overflow: visible;
+  padding: ${({ theme }) => theme.space.xsmall};
   z-index: ${({ theme: { zIndexFloor } }) => zIndexFloor || undefined};
 
   &:focus {

packages/components/src/Overlay/OverlaySurfaceArrow.tsx

@@ -63,28 +63,28 @@ export const OverlaySurfaceArrow = styled.div.attrs(
   }
 
   &[data-placement*='top'] {
-    bottom: -0.25rem;
+    bottom: ${({ theme: { space } }) => space.xxsmall};
     &::before {
       transform: rotate(45deg);
     }
   }
 
   &[data-placement*='right'] {
-    left: -0.25rem;
+    left: ${({ theme: { space } }) => space.xxsmall};
     &::before {
       transform: rotate(135deg);
     }
   }
 
   &[data-placement*='bottom'] {
-    top: -0.25rem;
+    top: ${({ theme: { space } }) => space.xxsmall};
     &::before {
       transform: rotate(225deg);
     }
   }
 
   &[data-placement*='left'] {
-    right: -0.25rem;
+    right: ${({ theme: { space } }) => space.xxsmall};
     &::before {
       transform: rotate(315deg);
     }

packages/components/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`Tooltip trigger: open on mouseover, close on mouseout 1`] = `
 }
 
 .c2[data-placement*='top'] {
-  bottom: -0.25rem;
+  bottom: 0.25rem;
 }
 
 .c2[data-placement*='top']::before {
@@ -30,7 +30,7 @@ exports[`Tooltip trigger: open on mouseover, close on mouseout 1`] = `
 }
 
 .c2[data-placement*='right'] {
-  left: -0.25rem;
+  left: 0.25rem;
 }
 
 .c2[data-placement*='right']::before {
@@ -40,7 +40,7 @@ exports[`Tooltip trigger: open on mouseover, close on mouseout 1`] = `
 }
 
 .c2[data-placement*='bottom'] {
-  top: -0.25rem;
+  top: 0.25rem;
 }
 
 .c2[data-placement*='bottom']::before {
@@ -50,7 +50,7 @@ exports[`Tooltip trigger: open on mouseover, close on mouseout 1`] = `
 }
 
 .c2[data-placement*='left'] {
-  right: -0.25rem;
+  right: 0.25rem;
 }
 
 .c2[data-placement*='left']::before {

packages/components/src/utils/usePopper.ts

@@ -107,13 +107,6 @@ export function usePopper({
               padding: 8,
             },
           },
-          {
-            name: 'offset',
-            options: {
-              // 8px away from anchor element
-              offset: [0, 8],
-            },
-          },
         ]),
         strategy: 'fixed',
       }),