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

* docs: fixed bug from using react-tooltip

* reverted removing react-uuid

www/docs/package.json

@@ -31,7 +31,6 @@
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-tooltip": "^5.7.0",
     "react-transition-group": "^4.4.5",
     "react-uuid": "^2.0.0",
     "redocusaurus": "^1.4.0",

www/docs/src/css/_tooltip.css

@@ -1,19 +1,46 @@
-.react-tooltip {
+.tooltip-container {
-  border: 1px solid var(--ifm-tooltip-border-color) !important;
+  position: relative;
-  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;
 }
 
-.react-tooltip-arrow {
+.tooltip-box {
-  display: none;
+  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 React from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip'
-import uuid from 'react-uuid';
-import 'react-tooltip/dist/react-tooltip.css'
 
-export default function Tooltip ({ children, text, tooltipClassName }) {
+export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
-  const [elementId, setElementId] = useState(null)
+  const [show, setShow] = React.useState(false);
-
-  useEffect(() => {
-    if (!elementId) {
-      setElementId(uuid())
-    }
-  }, [elementId])
 
   return (
-    <>
+    <span className={`tooltip-container ${tooltipClassName || ''}`}>
-      <span 
+      <span className={show ? 'tooltip-box visible' : 'tooltip-box'}>
-        id={elementId}
+        {text}
-        data-tooltip-content={text}
+      </span>
+      <span
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        {...rest}
       >
         {children}
       </span>
-      <ReactTooltip anchorId={elementId} className={tooltipClassName} />
+    </span>
-    </>
   );
 };

www/docs/yarn.lock

@@ -2592,22 +2592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.0.5":
-  version: 1.1.0
-  resolution: "@floating-ui/core@npm:1.1.0"
-  checksum: 427c95953f99c58647c3eee50d75770fddc19416cea152403010527135e8c88479352a8cbb4aeb09949cf283522861d815bf77dff5207b64dc8dd3b623bf57a3
-  languageName: node
-  linkType: hard
-
-"@floating-ui/dom@npm:^1.0.4":
-  version: 1.1.0
-  resolution: "@floating-ui/dom@npm:1.1.0"
-  dependencies:
-    "@floating-ui/core": ^1.0.5
-  checksum: 8cae2d59f32bce8d742a414477ee62854affbcb7ae318598adebadec36d43c01dccaf5004d73a9dd26683d393bb69fb1e8181970b8d7939f529512ab1ad672d2
-  languageName: node
-  linkType: hard
-
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -4686,7 +4670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.3.1, classnames@npm:^2.3.2":
+"classnames@npm:^2.3.1":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: cd50ead57b4f97436aaa9f9885c6926323efc7c2bea8e3d4eb10e4e972aa6a1cfca1c7a0e06f8a199ca7498d4339e30bb6002e589e61c9f21248cbf3e8b0b18d
@@ -5572,7 +5556,6 @@ __metadata:
     prism-react-renderer: ^1.3.1
     react: ^17.0.1
     react-dom: ^17.0.1
-    react-tooltip: ^5.7.0
     react-transition-group: ^4.4.5
     react-uuid: ^2.0.0
     redocusaurus: ^1.4.0
@@ -9895,19 +9878,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-tooltip@npm:^5.7.0":
-  version: 5.7.0
-  resolution: "react-tooltip@npm:5.7.0"
-  dependencies:
-    "@floating-ui/dom": ^1.0.4
-    classnames: ^2.3.2
-  peerDependencies:
-    react: ">=16.14.0"
-    react-dom: ">=16.14.0"
-  checksum: b9bbf50fe227ef478d98512f075b5dabc02f020256dcb825a36b8b7aa905764ce838f0dc382ca7f16279ab99327f8106fc38c14e619db07d937a5f0c37bc83fe
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"