@coinbase/cds-web 8.45.0 → 8.46.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.46.0 (2/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add open/close visibility delays to Tooltip. [[#234](https://github.com/coinbase/cds/pull/234)]
+
 ## 8.45.0 (2/12/2026 PST)
 
 #### 🚀 Updates

package/dts/overlays/tooltip/Tooltip.d.ts

@@ -17,5 +17,7 @@ export declare const Tooltip: ({
   focusTabIndexElements,
   respectNegativeTabIndex,
   autoFocusDelay,
+  openDelay,
+  closeDelay,
 }: TooltipProps) => import('react/jsx-runtime').JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,iQAkBrB,YAAY,4CAiEd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,wRAoBrB,YAAY,4CAiEd,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -27,6 +27,16 @@ export type TooltipBaseProps = SharedProps &
      * @default true
      */
     visible?: boolean;
+    /**
+     * Delay (in ms) before showing the tooltip on pointer hover.
+     * Keyboard focus still opens immediately for accessibility.
+     */
+    openDelay?: number;
+    /**
+     * Delay (in ms) before hiding the tooltip after pointer leave.
+     * Keyboard blur still closes immediately.
+     */
+    closeDelay?: number;
     /** Invert the theme's activeColorScheme for this component
      * @default true
      */

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}

package/dts/overlays/tooltip/useTooltipState.d.ts

@@ -1,4 +1,8 @@
-export declare const useTooltipState: (id?: string) => {
+export declare const useTooltipState: (
+  id?: string,
+  openDelay?: number,
+  closeDelay?: number,
+) => {
   isOpen: boolean;
   tooltipId: string;
   handleOnMouseEnter: () => void;

package/dts/overlays/tooltip/useTooltipState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipState.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/useTooltipState.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;;;;;;CAoC1C,CAAC"}
+{"version":3,"file":"useTooltipState.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/useTooltipState.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,EAAE,YAAY,MAAM,EAAE,aAAa,MAAM;;;;;;;CAsFnF,CAAC"}

package/esm/overlays/tooltip/Tooltip.js

@@ -25,7 +25,9 @@ export const Tooltip = _ref => {
     disableTypeFocus,
     focusTabIndexElements,
     respectNegativeTabIndex,
-    autoFocusDelay = 20
+    autoFocusDelay = 20,
+    openDelay,
+    closeDelay
   } = _ref;
   const {
     isOpen,
@@ -34,7 +36,7 @@ export const Tooltip = _ref => {
     handleOnFocus,
     handleOnBlur,
     tooltipId
-  } = useTooltipState(tooltipIdDefault);
+  } = useTooltipState(tooltipIdDefault, openDelay, closeDelay);
   const tooltipContentRef = useRef(null);
   const handleMouseEnter = useCallback(_ref2 => {
     let {

package/esm/overlays/tooltip/useTooltipState.js

@@ -1,19 +1,61 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
-export const useTooltipState = id => {
+export const useTooltipState = (id, openDelay, closeDelay) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const tooltipId = usePrefixedId(id);
-  const handleOnMouseEnter = useCallback(() => setIsHovered(true), []);
-  const toggleOffIsHovered = useCallback(() => setIsHovered(false), []);
-  const handleOnFocus = useCallback(() => setIsFocused(true), []);
-  const toggleOffIsFocused = useCallback(() => setIsFocused(false), []);
+  const openTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
+  const clearOpenTimeout = useCallback(() => {
+    if (openTimeoutRef.current) {
+      clearTimeout(openTimeoutRef.current);
+      openTimeoutRef.current = null;
+    }
+  }, []);
+  const clearCloseTimeout = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const handleOnMouseEnter = useCallback(() => {
+    clearCloseTimeout();
+    if (openDelay && openDelay > 0) {
+      openTimeoutRef.current = setTimeout(() => setIsHovered(true), openDelay);
+    } else {
+      setIsHovered(true);
+    }
+  }, [clearCloseTimeout, openDelay]);
+  const toggleOffIsHovered = useCallback(() => {
+    clearOpenTimeout();
+    if (closeDelay && closeDelay > 0) {
+      closeTimeoutRef.current = setTimeout(() => setIsHovered(false), closeDelay);
+    } else {
+      setIsHovered(false);
+    }
+  }, [clearOpenTimeout, closeDelay]);
+  const handleOnFocus = useCallback(() => {
+    clearCloseTimeout();
+    clearOpenTimeout();
+    setIsFocused(true);
+  }, [clearCloseTimeout, clearOpenTimeout]);
+  const toggleOffIsFocused = useCallback(() => {
+    clearOpenTimeout();
+    clearCloseTimeout();
+    setIsFocused(false);
+  }, [clearCloseTimeout, clearOpenTimeout]);
   const handleOnBlur = useCallback(() => {
     toggleOffIsFocused();
   }, [toggleOffIsFocused]);
   const handleOnMouseLeave = useCallback(() => {
     toggleOffIsHovered();
   }, [toggleOffIsHovered]);
+  useEffect(() => {
+    return () => {
+      clearOpenTimeout();
+      clearCloseTimeout();
+    };
+  }, [clearCloseTimeout, clearOpenTimeout]);
   return useMemo(() => {
     return {
       isOpen: isHovered || isFocused,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.45.0",
+  "version": "8.46.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.45.0",
+    "@coinbase/cds-common": "^8.46.0",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",