fix(Tip): Fixes hover gap and click issues with ToolTips and PreviewTips

packages/gamut/src/Popover/Popover.tsx

@@ -5,6 +5,7 @@ import { useWindowScroll, useWindowSize } from 'react-use';
 import { FocusTrap } from '../FocusTrap';
 import {
   Beak,
+  BeakBox,
   PatternContainer,
   PopoverContainer,
   PopoverPortal,
@@ -172,12 +173,16 @@ export const Popover: React.FC<PopoverProps> = ({
         widthRestricted={widthRestricted}
       >
         {beak && (
-          <Beak
-            outline={outline ? 'outline' : 'boxShadow'}
-            beak={`${position}-${beak}${variant === 'secondary' ? '-sml' : ''}`}
-            data-testid="popover-beak"
-            size={variant === 'secondary' ? 'sml' : 'lrg'}
-          />
+          <BeakBox variant={position}>
+            <Beak
+              beak={`${position}-${beak}${
+                variant === 'secondary' ? '-sml' : ''
+              }`}
+              data-testid="popover-beak"
+              size={variant === 'secondary' ? 'sml' : 'lrg'}
+              hasBorder={outline || variant === 'secondary'}
+            />
+          </BeakBox>
         )}
         {children}
       </RaisedDiv>

packages/gamut/src/Popover/elements.tsx

@@ -5,10 +5,12 @@ import { AnimatePresence, motion } from 'framer-motion';
 import * as React from 'react';
 
 import { BodyPortal } from '../BodyPortal';
-import { Box } from '../Box';
+import { Box, FlexBox } from '../Box';
 import { popoverToolTipBodyAlignments } from '../Tip/shared/styles';
 import { WithChildrenProp } from '../utils';
 import {
+  beakBorderStates,
+  beakBoxVariants,
   beakSize,
   beakVariants,
   outlineVariants,
@@ -39,10 +41,13 @@ export const RaisedDiv = styled.div<
 
 export const Beak = styled(Box)<
   StyleProps<typeof popoverStates> &
-    StyleProps<typeof outlineVariants> &
     StyleProps<typeof beakVariants> &
-    StyleProps<typeof beakSize>
->(beakVariants, beakSize);
+    StyleProps<typeof beakSize> &
+    StyleProps<typeof beakBorderStates>
+>(beakBorderStates, beakVariants, beakSize);
+
+export const BeakBox =
+  styled(FlexBox)<StyleProps<typeof beakBoxVariants>>(beakBoxVariants);
 
 export const PatternContainer = styled.div(
   variant({

packages/gamut/src/Popover/styles.tsx

@@ -28,6 +28,7 @@ export const raisedDivVariants = variant({
   },
 });
 
+const borderStyles = { borderColor: 'secondary', border: 1 } as const;
 export const outlineVariants = variant({
   defaultVariant: 'boxShadow',
   prop: 'outline',
@@ -36,8 +37,7 @@ export const outlineVariants = variant({
       boxShadow: '0 0 16px rgba(0, 0, 0, 0.1), 0 0 24px rgba(0, 0, 0, 0.15)',
     },
     outline: {
-      borderColor: 'secondary',
-      border: 1,
+      ...borderStyles,
       boxShadow: 'none',
     },
   },
@@ -50,6 +50,28 @@ export const widthStates = states({
   },
 });
 
+export const beakBorderStates = states({
+  hasBorder: borderStyles,
+});
+
+export const beakBoxVariants = variant({
+  base: {
+    alignItems: 'flex-end',
+    height: '15px',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    width: '100%',
+  },
+  variants: {
+    above: {
+      bottom: -15,
+    },
+    below: {
+      top: -15,
+    },
+  },
+});
 const beakVariantsArray = [
   'below-left',
   'below-right',
@@ -72,8 +94,10 @@ const beakVariantStyles = createVariantsFromAlignments(
 
 export const beakVariants = variant({
   base: {
-    position: 'absolute',
     transform: 'rotate(45deg)',
+    background: 'transparent',
+    zIndex: 1,
+    position: 'fixed',
   },
   prop: 'beak',
   variants: beakVariantStyles,

packages/gamut/src/Popover/utils.tsx

@@ -3,14 +3,14 @@ import { theme } from '@codecademy/gamut-styles';
 import { tooltipBackgroundColor } from '../Tip/shared/styles';
 
 const popoverAbove = {
-  borderRight: 'inherit',
-  borderBottom: 'inherit',
+  borderLeft: 'none',
+  borderTop: 'none',
   top: 'calc(100% - 10px)',
 } as const;
 
 const popoverBelow = {
-  borderLeft: 'inherit',
-  borderTop: 'inherit',
+  borderRight: 'none',
+  borderBottom: 'none',
   top: '-10px',
 } as const;
 
@@ -27,14 +27,14 @@ const beakCenter = {
 };
 
 const popoverAboveSml = {
-  borderRight: 'inherit',
-  borderBottom: 'inherit',
+  borderLeft: 'none',
+  borderTop: 'none',
   top: 'calc(100% - 8px)',
 } as const;
 
 const popoverBelowSml = {
-  borderLeft: 'inherit',
-  borderTop: 'inherit',
+  borderRight: 'none',
+  borderBottom: 'none',
   top: '-8px',
 } as const;
 

packages/gamut/src/Tip/shared/FloatingTip.tsx

@@ -113,6 +113,7 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
         onFocus={toolOnlyEventFunc}
         onBlur={toolOnlyEventFunc}
         onMouseEnter={toolOnlyEventFunc}
+        onMouseDown={(e) => e.preventDefault()}
         onKeyDown={
           escapeKeyPressHandler ? (e) => escapeKeyPressHandler(e) : undefined
         }

packages/gamut/src/Tip/shared/styles.tsx

@@ -31,6 +31,14 @@ export const topStyles = {
   pb: containerOffsetVertical,
 } as const;
 
+const beforeStyles = {
+  content: '""',
+  position: 'absolute',
+  width: '100%',
+};
+
+export const topStylesBefore = { ...beforeStyles, height: 16, bottom: '-4px' };
+
 export const topStylesAfter = {
   borderColor: 'currentColor',
   borderWidth: '0 1px 1px 0',
@@ -42,6 +50,12 @@ export const bottomStyles = {
   pt: containerOffsetVertical,
 } as const;
 
+export const bottomStylesBefore = {
+  ...beforeStyles,
+  height: 24,
+  top: '-8px',
+};
+
 export const bottomStylesAfter = {
   borderColor: 'currentColor',
   borderWidth: '1px 0 0 1px',
@@ -104,6 +118,7 @@ export const toolTipAlignmentVariants = variant({
     opacity: 0,
     position: 'absolute',
     visibility: 'hidden',
+
     '&::after': {
       content: '""',
       display: 'block',

packages/gamut/src/Tip/shared/utils.tsx

@@ -5,6 +5,7 @@ import {
   bottomCenterStylesAfter,
   bottomStyles,
   bottomStylesAfter,
+  bottomStylesBefore,
   centerStyles,
   centerStylesAfter,
   leftStyles,
@@ -14,6 +15,7 @@ import {
   topCenterStylesAfter,
   topStyles,
   topStylesAfter,
+  topStylesBefore,
 } from './styles';
 import { TipPlacementComponentProps, TipWrapperProps } from './types';
 
@@ -62,13 +64,16 @@ export const getPopoverAlignment = ({
 export const createToolTipVariantFromAlignment = (alignment: string) => {
   let styleObject = {};
   let styleObjectAfter = {};
+  let styleObjectBefore = {};
 
   if (alignment.includes('top')) {
     styleObject = { ...topStyles };
     styleObjectAfter = { ...topStylesAfter };
+    styleObjectBefore = { ...topStylesBefore };
   } else {
     styleObject = { ...bottomStyles };
     styleObjectAfter = { ...bottomStylesAfter };
+    styleObjectBefore = { ...bottomStylesBefore };
   }
 
   if (alignment.includes('center')) {
@@ -87,7 +92,11 @@ export const createToolTipVariantFromAlignment = (alignment: string) => {
     styleObjectAfter = { ...styleObjectAfter, ...leftStylesAfter };
   }
 
-  return { ...styleObject, '&::after': styleObjectAfter };
+  return {
+    ...styleObject,
+    '&::after': styleObjectAfter,
+    '&::before': styleObjectBefore,
+  };
 };
 
 export const createVariantsFromAlignments = (

packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx

@@ -52,6 +52,11 @@ export const Floating: Story = {
       tip="Wonder at the majesty of the universe"
       icon={SmileyStarEyesIcon}
       tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
+      onClick={() => {
+        console.log(
+          'This is a test, and will be deleted before the PR is merged'
+        );
+      }}
     />
   ),
 };