docs: fix bug resulted from react-tooltip (#3147)

* docs: fixed bug from using react-tooltip

* reverted removing react-uuid

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import uuid from 'react-uuid';
 
 import Tooltip from '../Tooltip';
 import copy from 'copy-text-to-clipboard';

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

@@ -1,26 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip'
-import uuid from 'react-uuid';
-import 'react-tooltip/dist/react-tooltip.css'
+import React from 'react';
 
-export default function Tooltip ({ children, text, tooltipClassName }) {
-  const [elementId, setElementId] = useState(null)
-
-  useEffect(() => {
-    if (!elementId) {
-      setElementId(uuid())
-    }
-  }, [elementId])
+export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
+  const [show, setShow] = React.useState(false);
 
   return (
-    <>
-      <span 
-        id={elementId}
-        data-tooltip-content={text}
+    <span className={`tooltip-container ${tooltipClassName || ''}`}>
+      <span className={show ? 'tooltip-box visible' : 'tooltip-box'}>
+        {text}
+      </span>
+      <span
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        {...rest}
       >
         {children}
       </span>
-      <ReactTooltip anchorId={elementId} className={tooltipClassName} />
-    </>
+    </span>
   );
 };