From d6e0cbdbd32b0217ed1533eb05f93947e2c2f80a Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Mon, 31 May 2021 19:15:16 +0200
Subject: [PATCH] Tooltip to react portal to fix in overflow elements

---
 src/components/reactButton.js     |  2 ++
 src/components/tooltip.js         | 33 +++++++++++++++++++++++++++----
 src/components/tooltip.module.css | 11 +++--------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/reactButton.js b/src/components/reactButton.js
index 050fc9c..db1713c 100644
--- a/src/components/reactButton.js
+++ b/src/components/reactButton.js
@@ -91,6 +91,8 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
   return (
     <>
       <Tooltip
+      width={300}
+      height={250}
         text={() => {
           return (
             <span
diff --git a/src/components/tooltip.js b/src/components/tooltip.js
index 8730830..899d612 100644
--- a/src/components/tooltip.js
+++ b/src/components/tooltip.js
@@ -1,11 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
 import styles from './tooltip.module.css'
 
-export default function Tooltip({ children, text, opened }) {
+const defWidth = 300
+const defHeight = 250
+
+export default function Tooltip({ children, text, opened, width, height }) {
+  const [ref, setRef] = useState(React.createRef()) // eslint-disable-line
+  const rect = ref.current ? ref.current.getBoundingClientRect() : null
+  const h = height || defHeight // eslint-disable-line
+  const w = width || defWidth // eslint-disable-line
+
   return (
-    <span className={styles.tooltip}>
+    <span className={styles.tooltip} ref={ref}>
       {text && text()}
-      {opened && <span className={styles.tooltiptext}>{children}</span>}
+      {opened &&
+        ReactDOM.createPortal(
+          <span
+            style={{
+              width: `${w}px`,
+              maxWidth: `${w}px`,
+              height: `${h}px`,
+              maxHeight: `${h}px`,
+              top: rect ? rect.top - h - 15 + window.scrollY : 0,
+              left: rect ? rect.left + window.scrollX : 0,
+            }}
+            className={styles.tooltiptext}
+          >
+            {children}
+          </span>,
+          document.body
+        )}
     </span>
   )
 }
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
index 2f05f33..dba1ed5 100644
--- a/src/components/tooltip.module.css
+++ b/src/components/tooltip.module.css
@@ -3,21 +3,16 @@
   display: inline-block;
 }
 
-.tooltip .tooltiptext {
-  width: 300px;
-  max-width: 300px;
-  height: 250px;
-  max-height: 250px;
+.tooltiptext {
+  position: absolute;
+
   background-color: var(--background-color);
   border-radius: 5px;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px;
-  position: absolute;
   z-index: 9999;
-  bottom: 100%;
-  left: 0%;
   margin-left: -60px;
   transition: opacity 0.3s;