[C-608] Fix tooltip bugs

packages/web/src/components/actions-tab/ActionsTab.js

@@ -74,7 +74,8 @@ const ExpandedActionsTab = (props) => {
       <Tooltip
         text={currentUserReposted ? 'Unrepost' : 'Repost'}
         disabled={isHidden || isDisabled || isOwner}
-        placement={direction === 'horizontal' ? 'bottom' : 'right'}
+        placement={direction === 'horizontal' ? 'top' : 'right'}
+        mount='page'
       >
         <div
           className={cn(styles.actionButton, {
@@ -87,7 +88,7 @@ const ExpandedActionsTab = (props) => {
             disabled={currentUserReposted || isHidden || isDisabled || isOwner}
             delay={REPOST_TOAST_TIMEOUT_MILLIS}
             containerClassName={styles.actionIconContainer}
-            placement={direction === 'horizontal' ? 'bottom' : 'right'}
+            placement={direction === 'horizontal' ? 'top' : 'right'}
           >
             <IconRepost
               className={cn(styles.iconRepost, {
@@ -100,7 +101,8 @@ const ExpandedActionsTab = (props) => {
       <Tooltip
         text='Share'
         disabled={isHidden || isDisabled}
-        placement={direction === 'horizontal' ? 'bottom' : 'right'}
+        placement={direction === 'horizontal' ? 'top' : 'right'}
+        mount='page'
       >
         <div
           className={styles.actionButton}

packages/web/src/components/card/desktop/Card.module.css

@@ -16,7 +16,7 @@
   background-color: var(--neutral-light-10);
   box-shadow: 0 1px 5px 1px var(--tile-shadow-1-alt),
     0 1px 0 0 var(--tile-shadow-2), 0 2px 10px -2px var(--tile-shadow-3);
-  transform: scale(1.02);
+  transform: scale3d(1.01, 1.01, 1.01);
 }
 
 .cardContainer:active {

packages/web/src/components/nav/desktop/NavColumn.tsx

@@ -469,7 +469,9 @@ const NavColumn = ({
                             ? messages.newPlaylistOrFolderTooltip
                             : messages.newPlaylistTooltip
                         }
-                        mount='parent'
+                        getPopupContainer={() =>
+                          scrollbarRef.current?.parentNode
+                        }
                       >
                         <span>
                           <Pill

packages/web/src/components/tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useCallback, useRef, CSSProperties } from 'react'
 
 import AntTooltip from 'antd/lib/tooltip'
 import cn from 'classnames'
@@ -16,23 +16,49 @@ export const Tooltip = ({
   color = themeColors['--secondary-transparent'],
   disabled = false,
   mount = 'parent',
+  getPopupContainer,
   mouseEnterDelay = 0.5,
   mouseLeaveDelay = 0,
   placement = 'top',
   shouldDismissOnClick = true,
   shouldWrapContent = true,
   text = ''
 }: TooltipProps) => {
-  const [hideTooltip, setHideTooltip] = useState(false)
+  // Keep track of a hidden state ourselves so we can dismiss the tooltip on click
+  const [isHiddenOverride, setIsHiddenOverride] = useState(false)
 
-  useEffect(() => {
-    if (hideTooltip) {
-      const hideTooltipTimeout = setTimeout(() => {
-        setHideTooltip(false)
-      }, 2500)
-      return () => clearTimeout(hideTooltipTimeout)
+  // Keep track of whether we are hovering over the tooltip to know when to
+  // allow it to become visible again
+  const mousedOver = useRef(false)
+
+  const onClick = useCallback(() => {
+    if (shouldDismissOnClick) {
+      setIsHiddenOverride(true)
     }
-  }, [hideTooltip])
+  }, [shouldDismissOnClick, setIsHiddenOverride])
+
+  const onMouseOut = useCallback(() => {
+    mousedOver.current = false
+    // Reset the hidden override if we are mousing
+    // out from the tooltip so that it can be used to
+    // hide the tooltip on the next hover.
+    setIsHiddenOverride(false)
+  }, [mousedOver, setIsHiddenOverride])
+
+  const onMouseOver = useCallback(() => {
+    mousedOver.current = true
+  }, [mousedOver])
+
+  const onVisibleChange = useCallback(
+    (visible: boolean) => {
+      // Reset the hidden override if we are becoming invisible or
+      // the mouse is not overtop the tooltip
+      if (!visible || !mousedOver.current) {
+        setIsHiddenOverride(false)
+      }
+    },
+    [setIsHiddenOverride]
+  )
 
   let popupContainer
   const page = document.getElementById('page')
@@ -47,22 +73,33 @@ export const Tooltip = ({
     }
   }
 
-  const visibleProps = disabled || hideTooltip ? { visible: false } : {}
+  // Keep track of visibility to override antd's native visibility.
+  // Use an empty object when visible as to not trigger the antd component to update
+  const visibleProps = disabled || isHiddenOverride ? { visible: false } : {}
+  // Use a css property so that when we change visibility on click the tooltip
+  // immediately disappears instead of animating out.
+  const overlayStyle = {
+    visibility: isHiddenOverride ? 'hidden' : 'visible'
+  } as CSSProperties
 
   return (
     <AntTooltip
       {...visibleProps}
+      overlayStyle={overlayStyle}
       placement={placement}
       title={text}
       color={color}
       // @ts-ignore
-      getPopupContainer={popupContainer}
+      getPopupContainer={getPopupContainer || popupContainer}
       overlayClassName={cn(styles.tooltip, className, {
         [styles.nonWrappingTooltip]: !shouldWrapContent
       })}
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}
-      onClick={() => shouldDismissOnClick && setHideTooltip(true)}
+      onClick={onClick}
+      onMouseOut={onMouseOut}
+      onMouseOver={onMouseOver}
+      onVisibleChange={onVisibleChange}
     >
       {children}
     </AntTooltip>

packages/web/src/components/tooltip/types.ts

@@ -12,11 +12,15 @@ export type TooltipProps = {
   color?: string
   // determines if it should display.
   disabled?: boolean
-  // Whether the tooltip gets mounted.
+  // Where the tooltip gets mounted.
   mount?: 'parent' | 'page' | 'body'
+  // Whether the tooltip should have a custom container/mount.
+  // Takes precedence over `mount`
+  getPopupContainer?: () => React.ReactNode
   mouseEnterDelay?: number
   mouseLeaveDelay?: number
   placement?: TooltipPlacement
+  // Should the tooltip go away when clicking on the underlying element?
   shouldDismissOnClick?: boolean
   // Whether there is a fixed max width, causing content to wrap onto the next line.
   shouldWrapContent?: boolean

packages/web/src/components/track/desktop/TrackTile.tsx

@@ -107,7 +107,8 @@ const TrackTile = memo(
         <Tooltip
           text={'Share'}
           disabled={isDisabled || hideShare}
-          placement={'bottom'}
+          placement='top'
+          mount='page'
         >
           <div
             className={cn(styles.iconButtonContainer, {
@@ -256,7 +257,8 @@ const TrackTile = memo(
                 <Tooltip
                   text={repostLabel}
                   disabled={isDisabled || isOwner}
-                  placement={'bottom'}
+                  placement='top'
+                  mount='page'
                 >
                   <div
                     className={cn(styles.iconButtonContainer, {
@@ -278,7 +280,8 @@ const TrackTile = memo(
                 <Tooltip
                   text={isFavorited ? 'Unfavorite' : 'Favorite'}
                   disabled={isDisabled || isOwner}
-                  placement={'bottom'}
+                  placement='top'
+                  mount='page'
                 >
                   <div
                     className={cn(styles.iconButtonContainer, {