[site/components][f]: tooltip portal fix

site/components/Anchor.js

@@ -2,13 +2,17 @@ import ReactDOM from 'react-dom'
 import { useRouter } from 'next/router'
 import { useState, useEffect, useRef, Fragment } from 'react'
 import {
-  useFloating,
-  useHover,
-  useInteractions,
   arrow,
   autoPlacement,
   autoUpdate,
-  offset
+  FloatingPortal,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useHover,
+  useInteractions,
+  useRole,
 } from '@floating-ui/react-dom-interactions'
 
 import getAbsolutePath from '../utils/absolutePath'
@@ -42,12 +46,15 @@ export const Anchor = (props) => {
     whileElementsMounted: autoUpdate,
     middleware: [
       offset(5),
-      autoPlacement(),
+      autoPlacement({ padding: 5 }),
+      shift({ padding: 5 }),
       arrow({ element: arrowRef, padding: 4 })
     ]
   });
   const { getReferenceProps, getFloatingProps } = useInteractions([
-    useHover(context, props)
+    useHover(context, { delay: { open: 100, close: 0 } }),
+    useRole(context, { role: 'tooltip' }),
+    useDismiss(context, { ancestorScroll: true })
   ]);
 
   useEffect(() => {
@@ -57,6 +64,7 @@ export const Anchor = (props) => {
   }, [showTooltip])
 
   const fetchPreview = async () => {
+    console.log("Fetching...")
     setPreviewLoaded(false);
     const basePath = "http://localhost:3000"; // TODO
     const currentPath = router.asPath;
@@ -84,30 +92,26 @@ export const Anchor = (props) => {
   ) {
     return <Fragment>
              <a {...props} {...getReferenceProps({ref: reference})} />
-             {( // TODO temp client only
+             <FloatingPortal>
-               typeof window !== 'undefined' && window.document &&
+               <Tooltip
-               ReactDOM.createPortal(
+                 {...getFloatingProps({
-                 (<Tooltip
+                   ref: floating,
-                    {...getFloatingProps({
+                   theme: 'light',
-                      ref: floating,
+                   arrowRef,
-                      theme: 'light',
+                   arrowX,
-                      arrowRef,
+                   arrowY,
-                      arrowX,
+                   placement,
-                      arrowY,
+                   style: {
-                      placement,
+                     position: strategy,
-                      style: {
+                     visibility: showTooltip && previewLoaded ? 'visible' : 'hidden',
-                        position: strategy,
+                     left: x ?? '',
-                        visibility: showTooltip && previewLoaded ? 'visible' : 'hidden',
+                     top: y ?? '',
-                        left: x ?? '',
+                   },
-                        top: y ?? '',
+                 })}
-                      },
+               >
-                    })}
+                 { preview }
-                  >
+               </Tooltip>
-                    { preview }
+             </FloatingPortal>
-                  </Tooltip>
-                 ), document.body
-               )
-             )}
            </Fragment>;
   }
   return <a {...props} />;

site/components/Tooltip.js

@@ -3,13 +3,13 @@ import React from 'react';
 
 const tooltipStyles = (theme) => ({
   height: 'auto',
-  // maxWidth: '30rem',
+  maxWidth: '80vw',
-  padding: '16px 22px',
+  padding: '1rem 2rem',
   background: theme === 'light' ? '#fff' : '#000',
   color: theme === 'light' ? 'rgb(99, 98, 98)' : '#A8A8A8',
   borderRadius: '4px',
   boxShadow: 'rgba(0, 0, 0, 0.55) 0px 0px 16px -3px',
-  fontSize: '90%'
+  fontSize: '0.9em'
 })
 
 const tooltipArrowStyles = ({ theme, x, y, side }) => ({
@@ -28,8 +28,6 @@ const tooltipArrowStyles = ({ theme, x, y, side }) => ({
 export const Tooltip = React.forwardRef((props, ref) => {
   const { theme, children, arrowRef, arrowX, arrowY, placement, ...tooltipProps } = props;
 
-  console.log({ arrowRef, arrowX, arrowY, placement });
-
   const arrowPlacement = {
     top: 'bottom',
     right: 'left',