docs: fixed tooltip causing overflow in codeblocks (#2679)

www/docs/src/theme/CodeBlock/index.js

@@ -1,11 +1,12 @@
 import React, {isValidElement} from 'react';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import CopyButton from '../CopyButton';
 import ElementContent from '@theme/CodeBlock/Content/Element';
 import StringContent from '@theme/CodeBlock/Content/String';
 import ThemedImage from '@theme/ThemedImage';
 import Tooltip from '../Tooltip';
-import CopyButton from '../CopyButton';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
 /**

www/docs/src/theme/CopyButton/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import copy from 'copy-text-to-clipboard';
+
 import Tooltip from '../Tooltip';
+import copy from 'copy-text-to-clipboard';
 
 export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
   const [isCopied, setIsCopied] = useState(false);

www/docs/src/theme/Tooltip/index.js

@@ -4,17 +4,17 @@ export default function Tooltip ({ children, text, tooltipClassName, ...rest })
   const [show, setShow] = React.useState(false);
 
   return (
-    <div className={`tooltip-container ${tooltipClassName || ''}`}>
-      <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
+    <span className={`tooltip-container ${tooltipClassName || ''}`}>
+      <span className={show ? 'tooltip-box visible' : 'tooltip-box'}>
         {text}
-      </div>
-      <div
+      </span>
+      <span
         onMouseEnter={() => setShow(true)}
         onMouseLeave={() => setShow(false)}
         {...rest}
       >
         {children}
-      </div>
-    </div>
+      </span>
+    </span>
   );
 };