Merge pull request #12717 from ethereum/fix-hydartion-tooltips

Fix hydration issue with tooltip and glossary tooltip

Author: wackerow

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -17,7 +17,7 @@ const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
   const { asPath } = useRouter()
 
   return (
-    <Box display="inline-block">
+    <Box as="span" display="inline-block">
       <Tooltip
         content={
           <GlossaryDefinition

src/components/Tooltip/index.tsx

@@ -6,6 +6,7 @@ import {
   PopoverContent,
   PopoverProps,
   PopoverTrigger,
+  Portal,
   useDisclosure,
 } from "@chakra-ui/react"
 
@@ -67,10 +68,12 @@ const Tooltip: React.FC<IProps> = ({
       {...rest}
     >
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody>{content}</PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverBody>{content}</PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   )
 }