style: tooltips

Author: tyler-dane

packages/web/src/common/constants/web.constants.ts

@@ -48,6 +48,9 @@ export enum ZIndex {
 export const Z_INDEX_FLOATING_FORM = ZIndex.MAX + ZIndex.LAYER_1;
 export const Z_INDEX_FLOATING_MENU = Z_INDEX_FLOATING_FORM + 1;
 export const Z_INDEX_MODAL = Z_INDEX_FLOATING_MENU + ZIndex.LAYER_1;
+// Tooltips are transient and anchored to their trigger, so they should float
+// above every persistent layer (floating form/menu/modal).
+export const Z_INDEX_TOOLTIP = Z_INDEX_MODAL + ZIndex.LAYER_1;
 
 export const ACCEPTED_TIMES = [
   "12:00 AM",

packages/web/src/components/Shortcuts/ShortcutHint.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { type HTMLProps, type ReactNode } from "react";
+import { type ReactNode } from "react";
 
 export function ShortcutHint({
   children,
@@ -26,22 +26,3 @@ export function ShortcutHint({
     </span>
   );
 }
-
-interface LegacyProps extends HTMLProps<HTMLDivElement> {
-  children?: ReactNode;
-}
-
-export const LegacyShortcutHint = ({
-  children,
-  className = "",
-  ...props
-}: LegacyProps) => {
-  return (
-    <div
-      className={`flex rounded border border-bg-primary bg-fg-primary px-2.5 py-[5px] ${className}`}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};

packages/web/src/components/Tooltip/Description/TooltipDescription.tsx

@@ -6,9 +6,5 @@ interface Props {
 }
 
 export const TooltipDescription: FC<Props> = ({ description }) => {
-  return (
-    <Text size="m" style={{ paddingRight: 10 }}>
-      {description}
-    </Text>
-  );
+  return <Text style={{ paddingRight: 10 }}>{description}</Text>;
 };

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

@@ -1,4 +1,5 @@
 import { FloatingPortal, useMergeRefs } from "@floating-ui/react";
+import classNames from "classnames";
 import {
   cloneElement,
   forwardRef,
@@ -7,7 +8,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import { ZIndex } from "@web/common/constants/web.constants";
+import { Z_INDEX_TOOLTIP, ZIndex } from "@web/common/constants/web.constants";
 import { useGridMaxZIndex } from "@web/common/hooks/useGridMaxZIndex";
 import { type TooltipOptions } from "./tooltip.types";
 import { TooltipContext, useTooltip, useTooltipContext } from "./useTooltip";
@@ -65,22 +66,24 @@ export const TooltipTrigger = forwardRef<
 export const TooltipContent = forwardRef<
   HTMLDivElement,
   HTMLProps<HTMLDivElement>
->(function TooltipContent({ children, style, ...props }, propRef) {
+>(function TooltipContent({ children, className, style, ...props }, propRef) {
   const context = useTooltipContext();
   const maxZIndex = useGridMaxZIndex();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
   return (
     <FloatingPortal>
-      {context.open && (
+      {context.isMounted && (
         <div
           ref={ref}
+          className={classNames("c-tooltip", className)}
           style={{
             left: context.x ?? 0,
             position: context.strategy,
             top: context.y ?? 0,
             visibility: context.x == null ? "hidden" : "visible",
-            zIndex: maxZIndex + ZIndex.LAYER_3,
+            zIndex: Math.max(maxZIndex + ZIndex.LAYER_3, Z_INDEX_TOOLTIP),
+            ...context.transitionStyles,
             ...style,
           }}
           {...context.getFloatingProps(props)}

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

@@ -8,7 +8,7 @@ import {
   TooltipTrigger,
 } from "@web/components/Tooltip";
 import { type TooltipOptions } from "@web/components/Tooltip/tooltip.types";
-import { LegacyShortcutHint } from "../Shortcuts/ShortcutHint";
+import { ShortcutHint } from "../Shortcuts/ShortcutHint";
 import { TooltipDescription } from "./Description/TooltipDescription";
 
 export interface Props {
@@ -37,19 +37,17 @@ export const TooltipWrapper: React.FC<Props> = ({
         {children}
       </TooltipTrigger>
 
-      <TooltipContent
-        className={`${description ? "bg-fg-primary" : ""} rounded p-1`}
-      >
+      <TooltipContent>
         <Flex alignItems={AlignItems.CENTER}>
           {description && <TooltipDescription description={description} />}
           {shortcut && (
-            <LegacyShortcutHint>
+            <ShortcutHint variant="keycap">
               {typeof shortcut === "string" ? (
                 <Text size="s">{shortcut}</Text>
               ) : (
                 shortcut
               )}
-            </LegacyShortcutHint>
+            </ShortcutHint>
           )}
         </Flex>
       </TooltipContent>

packages/web/src/components/Tooltip/useTooltip.ts

@@ -9,6 +9,7 @@ import {
   useHover,
   useInteractions,
   useRole,
+  useTransitionStyles,
 } from "@floating-ui/react";
 import { createContext, useContext, useMemo, useState } from "react";
 import { type TooltipOptions } from "./tooltip.types";
@@ -53,14 +54,30 @@ export function useTooltip({
 
   const interactions = useInteractions([hover, focus, dismiss, role]);
 
+  // App-native fade + rise on appear, using the shared ease-out-expo curve.
+  const transition = useTransitionStyles(context, {
+    duration: { open: 160, close: 120 },
+    initial: { opacity: 0, transform: "translateY(4px) scale(0.98)" },
+    common: { transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)" },
+  });
+
   return useMemo(
     () => ({
       open,
       setOpen,
+      isMounted: transition.isMounted,
+      transitionStyles: transition.styles,
       ...interactions,
       ...data,
     }),
-    [open, setOpen, interactions, data],
+    [
+      open,
+      setOpen,
+      transition.isMounted,
+      transition.styles,
+      interactions,
+      data,
+    ],
   );
 }
 

packages/web/src/index.css

@@ -417,8 +417,13 @@
   }
 }
 
+@utility c-tooltip {
+  @apply rounded bg-menu-tooltip-bg px-2 py-1 font-medium text-menu-tooltip-text leading-snug shadow-[0_4px_6px_var(--color-shadow-default)];
+  font-size: var(--font-size-s);
+}
+
 @utility c-context-tooltip {
-  @apply pointer-events-none invisible absolute bottom-full z-10 mb-1.5 translate-y-[5px] whitespace-nowrap rounded bg-menu-tooltip-bg px-2 py-1 text-[13px] text-menu-tooltip-text opacity-0 transition-all duration-200 ease-in-out group-hover:visible group-hover:translate-y-0 group-hover:opacity-100;
+  @apply c-tooltip pointer-events-none invisible absolute bottom-full z-10 mb-1.5 translate-y-1.25 whitespace-nowrap opacity-0 transition-all duration-200 ease-in-out group-hover:visible group-hover:translate-y-0 group-hover:opacity-100;
 }
 
 @utility c-context-menu-item {

packages/web/src/views/Forms/ActionsMenu/MenuItem.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
-import { LegacyShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
+import { ShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
 import {
   Tooltip,
   TooltipContent,
@@ -95,7 +95,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
         </button>
       </TooltipTrigger>
       <TooltipContent>
-        <LegacyShortcutHint>{tooltipContent}</LegacyShortcutHint>
+        <ShortcutHint variant="keycap">{tooltipContent}</ShortcutHint>
       </TooltipContent>
     </Tooltip>
   );

packages/web/src/views/Life/LifeDotTooltip.tsx

@@ -49,7 +49,7 @@ export function LifeDotTooltip({ weekNumber, children }: LifeDotTooltipProps) {
       {children}
       {open ? (
         <span
-          className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 whitespace-nowrap rounded border border-border-primary bg-bg-secondary px-2 py-1 text-text-lighter text-xs shadow-lg"
+          className="c-tooltip pointer-events-none absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 whitespace-nowrap"
           role="tooltip"
         >
           {label}