fix: tooltips too large for screen on load

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

@@ -27,7 +27,7 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
   escapeKeyPressHandler,
   inheritDims,
   info,
-  isTipHidden,
+  // isTipHidden,
   loading,
   narrow,
   overline,
@@ -130,7 +130,7 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
         animation="fade"
         dims={dims}
         horizontalOffset={offset}
-        isOpen={isHoverType ? isOpen : !isTipHidden}
+        isOpen
         outline
         skipFocusTrap
         targetRef={ref}

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

@@ -150,7 +150,9 @@ export const leftAlignStyles = {
 export const verticalCenterStyles = {
   ...verticalCenterWidths,
   left: 'calc(50% - 4rem)',
-  width: '70vw',
+  // ** This width helps the tooltip center itself to targets
+  //  smaller than it, and makes sure its legible at small screensizes */
+  width: 'min(128px, 70vw)',
 } as const;
 
 export const verticalCenterStylesAfter = { left: 'calc(50% - 0.5rem)' };
@@ -199,7 +201,6 @@ export const toolTipAlignmentVariants = variant({
     bg: 'transparent',
     display: 'flex',
     fontSmoothPixel,
-    maxWidth: '70vw',
     opacity: 0,
     position: 'absolute',
     visibility: 'hidden',

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

@@ -82,12 +82,12 @@ export const Floating: Story = {
       </ToolTip>
       <IconButton
         icon={SmileyStarEyesIcon}
-        tip="Wonder at the majesty of the universe"
+        tip="Wonder"
         tipProps={{ alignment: 'right-center', placement: 'floating' }}
       />{' '}
       <IconButton
         icon={SmileyStarEyesIcon}
-        tip="Wonder at the majesty of the universe"
+        tip="Wonder more"
         tipProps={{ alignment: 'left-center', placement: 'floating' }}
       />
     </FlexBox>