Restore support for zIndex and appendTo props to Popover and Tooltip (#…

…783) - Restore support for zIndex and appendTo props to Popover and Tooltip.
StenaIT · Sep 12, 2024 · 997023e · 997023e
1 parent 25701f0
commit 997023e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/tooltip/src/components/popover/Popover.tsx b/packages/tooltip/src/components/popover/Popover.tsx
@@ -53,6 +53,8 @@ export interface PopoverProps {
   variant?: PopoverVariant;
   theme?: PopoverTheme;
   renderTrigger: (props: Record<string, unknown>) => ReactNode;
+  appendTo?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+  zIndex?: number;
 }
 
 const ARROW_WIDTH = 12;
@@ -67,6 +69,8 @@ export const Popover: React.FC<PopoverProps> = ({
   hideArrow,
   renderTrigger,
   disablePadding,
+  appendTo,
+  zIndex,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -118,11 +122,11 @@ export const Popover: React.FC<PopoverProps> = ({
       {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}
 
       {isMounted && (
-        <FloatingPortal>
+        <FloatingPortal root={appendTo}>
           <FloatingFocusManager context={context} modal={false}>
             <div
               ref={refs.setFloating}
-              style={floatingStyles}
+              style={{ zIndex, ...floatingStyles }}
               {...getFloatingProps}
             >
               <div

diff --git a/packages/tooltip/src/components/tooltip/Tooltip.tsx b/packages/tooltip/src/components/tooltip/Tooltip.tsx
@@ -31,6 +31,8 @@ export interface TooltipProps extends PropsWithChildren {
   label: string;
   variant?: TooltipVariant;
   maxWidth?: CSSProperties["maxWidth"];
+  appendTo?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+  zIndex?: number;
 }
 
 type TooltipVariant = "info" | "warning" | "error";
@@ -52,6 +54,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
   label,
   variant,
   maxWidth = "500px",
+  appendTo,
+  zIndex,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -87,8 +91,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
       </div>
 
       {isMounted && (
-        <FloatingPortal>
-          <div ref={refs.setFloating} style={floatingStyles}>
+        <FloatingPortal root={appendTo}>
+          <div ref={refs.setFloating} style={{ zIndex, ...floatingStyles }}>
             <div
               style={{ maxWidth, ...styles }}
               className={cx(