Place tooltips better on smaller screens

package.json

@@ -14,6 +14,7 @@
     "@ethersproject/units": "^5.0.0-beta.132",
     "@material-ui/core": "^4.9.5",
     "@mycrypto/eth-scan": "^2.1.0",
+    "@popperjs/core": "^2.4.0",
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
     "@reduxjs/toolkit": "^1.3.5",
@@ -42,6 +43,7 @@
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
     "react-i18next": "^10.7.0",
+    "react-popper": "^2.2.3",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.4.1",

src/components/Question/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
+import { createPortal } from 'react-dom'
 import styled, { keyframes } from 'styled-components'
 import { HelpCircle as Question } from 'react-feather'
+import { usePopper } from 'react-popper'
 
 const Wrapper = styled.div`
   position: relative;
@@ -36,14 +38,9 @@ const fadeIn = keyframes`
 `
 
 const Popup = styled.div`
-  position: absolute;
   width: 228px;
   z-index: 9999;
-  left: 40px;
-  top: -10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  margin: 0.4rem;
   padding: 0.6rem 1rem;
   line-height: 150%;
   background: ${({ theme }) => theme.bg1};
@@ -55,31 +52,43 @@ const Popup = styled.div`
 
   color: ${({ theme }) => theme.text2};
   font-weight: 400;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    left: -20px;
-  `}
 `
 
 export default function QuestionHelper({ text }: { text: string }) {
-  const [showPopup, setPopup] = useState(false)
+  const [showPopup, setShowPopup] = useState<boolean>(false)
+  const [referenceElement, setReferenceElement] = useState(null)
+  const [popperElement, setPopperElement] = useState(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'auto',
+    strategy: 'fixed'
+  })
+
+  const portal = createPortal(
+    showPopup && (
+      <Popup ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+        {text}
+      </Popup>
+    ),
+    document.getElementById('popover-container')
+  )
 
   return (
     <Wrapper>
       <QuestionWrapper
         onClick={() => {
-          setPopup(!showPopup)
+          setShowPopup(true)
         }}
         onMouseEnter={() => {
-          setPopup(true)
+          setShowPopup(true)
         }}
         onMouseLeave={() => {
-          setPopup(false)
+          setShowPopup(false)
         }}
+        ref={setReferenceElement}
       >
         <Question size={16} />
       </QuestionWrapper>
-      {showPopup && <Popup>{text}</Popup>}
+      {portal}
     </Wrapper>
   )
 }

src/components/TokenLogo/index.tsx

@@ -31,6 +31,8 @@ const Emoji = styled.span<{ size?: string }>`
 const StyledEthereumLogo = styled(EthereumLogo)<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
+  border-radius: 24px;
 `
 
 export default function TokenLogo({
@@ -53,13 +55,7 @@ export default function TokenLogo({
   let path = ''
   // hard code to show ETH instead of WETH in UI
   if (address === WETH[chainId].address) {
-    return (
-      <StyledEthereumLogo
-        style={{ boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.075)', borderRadius: '24px' }}
-        size={size}
-        {...rest}
-      />
-    )
+    return <StyledEthereumLogo size={size} {...rest} />
   } else if (!error && !BAD_IMAGES[address] && isAddress(address)) {
     path = TOKEN_ICON_API(address)
   } else {

src/pages/App.tsx

@@ -51,9 +51,7 @@ const BodyWrapper = styled.div`
   }
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-      padding-top: 16px;
-      padding-left: 16px;
-      padding-right: 16px;
+      padding: 16px;
   `};
 
   z-index: 1;
@@ -168,6 +166,7 @@ export default function App() {
             <StyledRed />
           </AppWrapper>
         </BrowserRouter>
+        <div id="popover-container" />
       </Suspense>
     </>
   )

yarn.lock

@@ -2322,6 +2322,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
+
 "@portis/eth-json-rpc-middleware@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@portis/eth-json-rpc-middleware/-/eth-json-rpc-middleware-4.1.2.tgz#391e392da03dea348c8111a8111ce4550aa24a02"
@@ -14474,6 +14479,11 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
+  integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw==
+
 react-feather@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.8.tgz#455baf1470f756a57e2ad6c72545444ce5925781"
@@ -14509,6 +14519,14 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
@@ -17442,6 +17460,13 @@ walletlink@^2.0.2:
     preact "^10.3.3"
     rxjs "^6.5.4"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"