Refine og hover behavior

src/components/og/OGTooltip.tsx

@@ -26,7 +26,7 @@ export default function OGTooltip({
           {...props}
           className={clsx(
             'overflow-hidden rounded-[0.25rem]',
-            'outline-medium bg-dim',
+            'outline-medium bg-extra-dim',
           )}
         />
         {caption && <div className={clsx(

src/components/primitives/TooltipPrimitive.tsx

@@ -13,28 +13,36 @@ export default function TooltipPrimitive({
   children,
   className,
   classNameTrigger: classNameTriggerProp,
-  sideOffset = 10,
-  delayDuration = 100,
-  skipDelayDuration = 300,
-  supportMobile,
   color,
   keyCommand,
   keyCommandModifier,
+  supportMobile,
+  animateLarge,
   disableHoverableContent,
+  delayDuration = 100,
+  skipDelayDuration = 300,
+  align,
+  side,
+  sideOffset = 10,
   debug,
 }: {
   content?: ReactNode
   children: ReactNode
   className?: string
   classNameTrigger?: string
-  sideOffset?: number
-  delayDuration?: number
-  skipDelayDuration?: number
-  supportMobile?: boolean
   color?: ComponentProps<typeof MenuSurface>['color']
   keyCommand?: string
   keyCommandModifier?: ComponentProps<typeof KeyCommand>['modifier']
+  supportMobile?: boolean
+  animateLarge?: boolean
   disableHoverableContent?: boolean
+  // Tooltip.Provider
+  delayDuration?: number
+  skipDelayDuration?: number
+  // Tooltip.Content
+  align?: ComponentProps<typeof Tooltip.Content>['align']
+  side?: ComponentProps<typeof Tooltip.Content>['side']
+  sideOffset?: number
   debug?: boolean
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -104,11 +112,17 @@ export default function TooltipPrimitive({
         <Tooltip.Portal>
           <Tooltip.Content
             ref={refContent}
+            align={align}
+            side={side}
             sideOffset={sideOffset}
             className={clsx(
               // Entrance animations
-              'data-[side=top]:animate-fade-in-from-bottom',
+              animateLarge
-              'data-[side=bottom]:animate-fade-in-from-top',
+                ? 'data-[side=top]:animate-fade-in-from-bottom-large'
+                : 'data-[side=top]:animate-fade-in-from-bottom',
+              animateLarge
+                ? 'data-[side=bottom]:animate-fade-in-from-top-large'
+                : 'data-[side=bottom]:animate-fade-in-from-top',
               // Extra collision padding
               'mx-2',
               // Z-index above

src/recipe/PhotoRecipeOverlay.tsx

@@ -124,7 +124,7 @@ export default function PhotoRecipeOverlay({
               recipe={title}
               className={clsx(
                 'text-[15px]',
-                '[&>*>*>*]:text-black',
+                '[&>*>*>*>*]:text-black',
                 'tracking-wide',
               )}
             />

tailwind.css

@@ -47,28 +47,26 @@ html {
     100% { opacity: 1; }
   }
 
-  --animate-fade-in-from-top: fade-in-from-top 0.25s ease-in-out;
+  --animate-fade-in-from-top: fade-in-from-top 0.2s ease-out;
+  --animate-fade-in-from-top-large: fade-in-from-top-large 0.2s ease-out;
   @keyframes fade-in-from-top {
-    0% {
+    0% { opacity: 0; transform: translateY(-10px); }
-      opacity: 0;
+    100% { opacity: 1; transform: translateY(0); }
-      transform: translateY(-10px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
   }
+  @keyframes fade-in-from-top-large {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 
-  --animate-fade-in-from-bottom: fade-in-from-bottom 0.25s ease-in-out;
+  --animate-fade-in-from-bottom: fade-in-from-bottom 0.2s ease-out;
+  --animate-fade-in-from-bottom-large: fade-in-from-bottom-large 0.2s ease-out;
   @keyframes fade-in-from-bottom {
-    0% {
+    0% { opacity: 0; transform: translateY(10px); }
-      opacity: 0;
+    100% { opacity: 1; transform: translateY(0); }
-      transform: translateY(10px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
   }
+  @keyframes fade-in-from-bottom-large {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 
   --animate-rotate-pulse: rotate-pulse 0.75s linear infinite normal both running;