From 567af48f1fe1d294eec34f7a246494aa955181ec Mon Sep 17 00:00:00 2001
From: Jannik Hell <jannik.hell@mytaxi.com>
Date: Tue, 1 Aug 2023 16:52:18 +0200
Subject: [PATCH] Render Tooltip via React Portal (#350)

* fix: correct tooltip rendering

render tooltip via react portal - new prop `container`

closes issue #349

* 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
---
 src/components/Tooltip/Tooltip.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 4ed72cdaa..7a1e7c3d7 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { Placement } from '@popperjs/core/lib/enums';
 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';
@@ -89,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;
@@ -197,17 +199,20 @@ const Tooltip: React.FC<PropsWithChildren<TooltipProps>> = ({
                 onMouseOut: () => handleVisibilityChange(false),
                 ref: setTriggerReference
             })}
-            {content && isVisible && (
-                <TooltipBody
-                    ref={setContentReference}
-                    inverted={inverted}
-                    style={{ ...styles.popper }}
-                    variant={attributes.popper?.['data-popper-placement']}
-                    {...attributes.popper}
-                >
-                    {dynamicContent}
-                </TooltipBody>
-            )}
+            {content &&
+                isVisible &&
+                createPortal(
+                    <TooltipBody
+                        ref={setContentReference}
+                        inverted={inverted}
+                        style={{ ...styles.popper }}
+                        variant={attributes.popper?.['data-popper-placement']}
+                        {...attributes.popper}
+                    >
+                        {dynamicContent}
+                    </TooltipBody>,
+                    document.body
+                )}
         </>
     );
 };