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

* docs: fixed bug from using react-tooltip

* reverted removing react-uuid

www/docs/src/css/_tooltip.css

@@ -1,19 +1,46 @@
-.react-tooltip {
-  border: 1px solid var(--ifm-tooltip-border-color) !important;
-  border-radius: 8px !important;
-  font-size: 12px !important;
-  font-weight: 500 !important;
-  line-height: 20px !important;
-  box-shadow: 0px 2px 16px var(--ifm-tooltip-box-shadow-color) !important;
-  padding: 8px 16px !important;
+.tooltip-container {
+  position: relative;
 }
 
-.react-tooltip-arrow {
-  display: none;
+.tooltip-box {
+  position: absolute;
+  top: calc(-100% - 17px);
+  z-index: 100000;
+  padding: 8px 16px;
+  max-width: 170px;
+  text-align: center;
+
+  background-color: var(--ifm-tooltip-background-color);
+  border: 1px solid var(--ifm-tooltip-border-color);
+  border-radius: 8px;
+  color: var(--ifm-color-content);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  box-shadow: 0px 2px 16px var(--ifm-tooltip-box-shadow-color);
+
+  opacity: 0;
+  transition: opacity .3s ease-out;
+  visibility: hidden;
+  width: max-content;
+  will-change: opacity,visibility;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip-box.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media screen and (min-width: 876px) {
+  .inline-tooltip {
+    display: inline-block;
+  }
 }
 
 @media screen and (max-width: 875px) {
-  .react-tooltip {
+  .tooltip-box {
     display: none;
   }
 }

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>
   );
 };