feat(tooltip): increment z-index above popover default z-index

Author: gcornut

CHANGELOG.md

@@ -14,8 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
--   `Tooltip`: Add `closeMode` to hide the tooltip instead of unmounting it
--   `Tooltip`: Add `ariaLinkMode` to use tooltip as label instead of description
+-   `Tooltip`: add `closeMode` to hide the tooltip instead of unmounting it.
+-   `Tooltip`: add `ariaLinkMode` to use tooltip as label instead of description.
+
+### Changed
+
+-   `Tooltip`: increment z-index making them appear above popovers.
 
 ## [3.9.1][] - 2024-09-17
 

packages/lumx-react/src/components/popover/Popover.tsx

@@ -15,7 +15,7 @@ import { skipRender } from '@lumx/react/utils/skipRender';
 
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
-import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
+import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
 
 /**
  * Defines the props of the component.
@@ -88,7 +88,7 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
     placement: Placement.AUTO,
     focusAnchorOnClose: true,
     usePortal: true,
-    zIndex: 9999,
+    zIndex: POPOVER_ZINDEX,
 };
 
 /** Method to render the popover inside a portal if usePortal is true */

packages/lumx-react/src/components/popover/constants.ts

@@ -55,3 +55,8 @@ export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
  * Arrow size (in pixel).
  */
 export const ARROW_SIZE = 14;
+
+/**
+ * Popover default z-index
+ */
+export const POPOVER_ZINDEX = 9999;

packages/lumx-react/src/components/tooltip/Tooltip.tsx

@@ -13,7 +13,7 @@ import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
 import { usePopper } from '@lumx/react/hooks/usePopper';
 
-import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
+import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -55,6 +55,7 @@ const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
     closeMode: 'unmount',
     ariaLinkMode: 'aria-describedby',
+    zIndex: TOOLTIP_ZINDEX,
 };
 
 /**
@@ -70,8 +71,18 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, closeMode, ariaLinkMode, ...forwardedProps } =
-        props;
+    const {
+        label,
+        children,
+        className,
+        delay,
+        placement,
+        forceOpen,
+        closeMode,
+        ariaLinkMode,
+        zIndex,
+        ...forwardedProps
+    } = props;
     // Disable in SSR.
     if (!DOCUMENT) {
         return <>{children}</>;
@@ -131,7 +142,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                                 hidden: !isOpen && closeMode === 'hide',
                             }),
                         )}
-                        style={styles.popper}
+                        style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />

packages/lumx-react/src/components/tooltip/constants.ts

@@ -1 +1,8 @@
+import { POPOVER_ZINDEX } from '../popover/constants';
+
 export const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+export const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;