Tooltip to react portal to fix in overflow elements

src/components/reactButton.js

@@ -91,6 +91,8 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
   return (
     <>
       <Tooltip
+      width={300}
+      height={250}
         text={() => {
           return (
             <span

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>
   )
 }

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;