docs: fixed mobile usability of tooltips (#3124)

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.0",
     "react-transition-group": "^4.4.5",
     "react-uuid": "^2.0.0",
     "redocusaurus": "^1.4.0",

www/docs/src/css/_code.css

@@ -98,6 +98,10 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   border-radius: var(--ifm-code-border-radius);
 }
 
+.code-action-copy {
+  display: flex;
+}
+
 .code-action {
   background-color: transparent;
   border: none;

www/docs/src/css/_tooltip.css

@@ -1,45 +1,19 @@
-.tooltip-container {
-  position: relative;
+.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-box {
-  position: absolute;
-  top: calc(-100% - 17px);
-  z-index: 100000;
-  padding: 8px 16px;
-  max-width: 170px;
-  width: max-content;
-  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: all .1s;
-}
-
-.tooltip-box:not(.visible) {
+.react-tooltip-arrow {
   display: none;
 }
 
-.tooltip-box.visible {
-  opacity: 1;
-}
-
-.inline-tooltip {
-  display: inline-block;
-}
-
-.tooltip-container:not(.inline-tooltip) .tooltip-box {
-  left: calc(-50% - 30px);
-}
-
-.inline-tooltip .tooltip-box {
-  left: 0;
+@media screen and (max-width: 875px) {
+  .react-tooltip {
+    display: none;
+  }
 }

www/docs/src/css/_variables.css

@@ -95,6 +95,9 @@
   --ifm-tooltip-background-color: #fff;
   --ifm-tooltip-border-color: #E5E7EB;
   --ifm-tooltip-box-shadow-color: rgba(17, 24, 39, 0.08);
+  --rt-opacity: 1 !important;
+  --rt-color-dark: var(--ifm-tooltip-background-color) !important;
+  --rt-color-white: var(--ifm-color-content) !important;
 
   /* Buttons */
   --ifm-primary-btn-background-color: #fff;

www/docs/src/theme/CodeBlock/Content/String.js

@@ -103,7 +103,7 @@ export default function CodeBlockString({
             </Tooltip>
           )}
           {!noCopy && (
-            <CopyButton buttonClassName='code-action' text={code}>
+            <CopyButton buttonClassName='code-action code-action-copy' text={code}>
               <ThemedImage alt='Copy to Clipboard' sources={{
                 light: useBaseUrl('/img/clipboard-copy.png'),
                 dark: useBaseUrl('/img/clipboard-copy-dark.png')

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import uuid from 'react-uuid';
 
 import Tooltip from '../Tooltip';
 import copy from 'copy-text-to-clipboard';
@@ -18,10 +19,16 @@ export default function CopyButton ({ children, buttonClassName, text, tooltipCl
   useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
 
   return (
-    <Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`} tooltipClassName={tooltipClassName}>
-      <button className={`copy-action ${buttonClassName}`} onClick={handleCopy}>
+    <Tooltip
+      text={isCopied ? `Copied!` : `Copy to Clipboard`}
+      tooltipClassName={tooltipClassName}
+    >
+      <span
+        className={`copy-action ${buttonClassName}`}
+        onClick={handleCopy}
+      >
         {children}
-      </button>
+      </span>
     </Tooltip>
   )
 }

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

@@ -1,20 +1,26 @@
-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 }) {
-  const [show, setShow] = React.useState(false);
+export default function Tooltip ({ children, text, tooltipClassName }) {
+  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'}>
-        {text}
-      </span>
-      <span
-        onMouseEnter={() => setShow(true)}
-        onMouseLeave={() => setShow(false)}
-        {...rest}
+    <>
+      <span 
+        id={elementId}
+        data-tooltip-content={text}
       >
         {children}
       </span>
-    </span>
+      <ReactTooltip anchorId={elementId} className={tooltipClassName} />
+    </>
   );
 };

www/docs/yarn.lock

@@ -2574,6 +2574,22 @@ __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"
@@ -4641,7 +4657,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
@@ -5527,6 +5543,7 @@ __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
@@ -9878,6 +9895,19 @@ __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"