From 2db038cd82dc27aec01348afa1b3442a22da8d77 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 28 Nov 2022 11:03:11 +0200
Subject: [PATCH] docs: fixed tooltip causing overflow in codeblocks (#2679)

---
 www/docs/src/theme/CodeBlock/index.js  |  7 ++++---
 www/docs/src/theme/CopyButton/index.js |  3 ++-
 www/docs/src/theme/Tooltip/index.js    | 12 ++++++------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/www/docs/src/theme/CodeBlock/index.js b/www/docs/src/theme/CodeBlock/index.js
index f5b03ea4f4..e53ecc6a5c 100644
--- a/www/docs/src/theme/CodeBlock/index.js
+++ b/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';
 
 /**
diff --git a/www/docs/src/theme/CopyButton/index.js b/www/docs/src/theme/CopyButton/index.js
index d843d471c8..8288855840 100644
--- a/www/docs/src/theme/CopyButton/index.js
+++ b/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);
diff --git a/www/docs/src/theme/Tooltip/index.js b/www/docs/src/theme/Tooltip/index.js
index d17dd333e8..8445a36f4b 100644
--- a/www/docs/src/theme/Tooltip/index.js
+++ b/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>
   );
 };
\ No newline at end of file