docs: add and use react-tooltip (#3176)

* chore: add react-tooltip package into docs

* chore: add react-tooltip styles globally into Layout

* chore: use react-tooltip component into docs

* fixes to the CSS

---------

Co-authored-by: Shahed Nasser <shahednasser@gmail.com>

www/docs/package.json

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

www/docs/src/css/_tooltip.css

@@ -1,46 +1,19 @@
-.tooltip-container {
+.react-tooltip {
-  position: relative;
+  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-box {
+.react-tooltip-arrow {
-  position: absolute;
+  display: none;
-  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) {
-  .tooltip-box {
+  .react-tooltip {
     display: none;
   }
 }

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

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

www/docs/yarn.lock

@@ -2592,6 +2592,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@floating-ui/core@npm:1.1.1"
+  checksum: 235b5aa1676e2cd10aad73357680bf602e34154147c7ac77a8b9cb5083c42cc27014830c064b10750fb46d9f14f3b089c2582044e1c0785361fd2b572196423d
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.4":
+  version: 1.1.1
+  resolution: "@floating-ui/dom@npm:1.1.1"
+  dependencies:
+    "@floating-ui/core": ^1.1.0
+  checksum: 2e508c834fed7567fc496ee946d092056487958330fd5260768536282eb19e990087ddbfe60a39cfe7ed87f8ec0741cc11fa33505c478238d78515a27dd69b6d
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -4670,7 +4686,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.3.1":
+"classnames@npm:^2.3.1, classnames@npm:^2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: cd50ead57b4f97436aaa9f9885c6926323efc7c2bea8e3d4eb10e4e972aa6a1cfca1c7a0e06f8a199ca7498d4339e30bb6002e589e61c9f21248cbf3e8b0b18d
@@ -5556,6 +5572,7 @@ __metadata:
     prism-react-renderer: ^1.3.1
     react: ^17.0.1
     react-dom: ^17.0.1
+    react-tooltip: 5.7.4
     react-transition-group: ^4.4.5
     react-uuid: ^2.0.0
     redocusaurus: ^1.4.0
@@ -9878,6 +9895,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:5.7.4":
+  version: 5.7.4
+  resolution: "react-tooltip@npm:5.7.4"
+  dependencies:
+    "@floating-ui/dom": ^1.0.4
+    classnames: ^2.3.2
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: 36e75b9dc39d24ca55776a11c95322738dd8b016042706f9c0a34cfc27b7b1519fa91da96066525b5a15353068d6ec2ea3217d3e54311af845f05770c4bc442c
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"