fix: remove container prop

remove new `container` prop and render tooltip body in any case via react portal directly to document.body with a z-index of 1300
freenowtech · Aug 1, 2023 · 94b053c · 94b053c
1 parent befae20
commit 94b053c
Showing 1 changed file with 17 additions and 27 deletions.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -7,7 +7,7 @@ import { variant } from 'styled-system';
 
 import type { PropsWithChildren } from 'react';
 
-import { MediaQueries, SemanticColors } from '../../essentials';
+import { Elevation, MediaQueries, SemanticColors } from '../../essentials';
 import { get } from '../../utils/themeGet';
 import { Text } from '../Text/Text';
 import { mapPlacementWithDeprecationWarning, TooltipPlacement } from './TooltipPlacement';
@@ -90,6 +90,7 @@ interface TooltipBodyProps {
 
 const TooltipBody = styled.div<TooltipBodyProps>`
     position: relative;
+    z-index: ${Elevation.TOOLTIP};
     background-color: ${p =>
         p.inverted ? SemanticColors.background.secondary : SemanticColors.background.primaryEmphasized};
     padding: 0.25rem 0.5rem;
@@ -139,19 +140,14 @@ interface TooltipProps {
      * Force the tooltip to always be visible, regardless of user interaction
      */
     alwaysVisible?: boolean;
-    /**
-     * Render the tooltip into a certain DOM node. One use case is when the tooltip should "hover" over the entire page and shouldn't trigger any scrollbars to appear
-     */
-    container?: Element | DocumentFragment;
 }
 
 const Tooltip: React.FC<PropsWithChildren<TooltipProps>> = ({
     content,
     children,
     placement = 'top',
     alwaysVisible = false,
-    inverted = false,
-    container
+    inverted = false
 }) => {
     const [isVisible, setIsVisible] = React.useState(alwaysVisible);
     /**
@@ -196,33 +192,27 @@ const Tooltip: React.FC<PropsWithChildren<TooltipProps>> = ({
         }
     };
 
-    const renderTooltipBody = () => {
-        const tooltipBody = (
-            <TooltipBody
-                ref={setContentReference}
-                inverted={inverted}
-                style={{ ...styles.popper }}
-                variant={attributes.popper?.['data-popper-placement']}
-                {...attributes.popper}
-            >
-                {dynamicContent}
-            </TooltipBody>
-        );
-
-        if (container) {
-            return createPortal(tooltipBody, container);
-        }
-        return tooltipBody;
-    };
-
     return (
         <>
             {React.cloneElement(children as React.ReactElement, {
                 onMouseOver: () => handleVisibilityChange(true),
                 onMouseOut: () => handleVisibilityChange(false),
                 ref: setTriggerReference
             })}
-            {content && isVisible && renderTooltipBody()}
+            {content &&
+                isVisible &&
+                createPortal(
+                    <TooltipBody
+                        ref={setContentReference}
+                        inverted={inverted}
+                        style={{ ...styles.popper }}
+                        variant={attributes.popper?.['data-popper-placement']}
+                        {...attributes.popper}
+                    >
+                        {dynamicContent}
+                    </TooltipBody>,
+                    document.body
+                )}
         </>
     );
 };