From 499427fbc4ce68f1bf1a035cd71cb15e836a4d1d Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Tue, 31 Jan 2023 16:33:54 +0200 Subject: [PATCH] docs: fix bug resulted from react-tooltip (#3147) * docs: fixed bug from using react-tooltip * reverted removing react-uuid --- www/docs/package.json | 1 - www/docs/src/css/_tooltip.css | 49 ++++++++++++++++++++------ www/docs/src/theme/CopyButton/index.js | 1 - www/docs/src/theme/Tooltip/index.js | 30 +++++++--------- www/docs/yarn.lock | 32 +---------------- 5 files changed, 51 insertions(+), 62 deletions(-) diff --git a/www/docs/package.json b/www/docs/package.json index 2a2bdba430..9771b56b9a 100644 --- a/www/docs/package.json +++ b/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", diff --git a/www/docs/src/css/_tooltip.css b/www/docs/src/css/_tooltip.css index 5dd33d6f99..8e0ced2878 100644 --- a/www/docs/src/css/_tooltip.css +++ b/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; } } \ No newline at end of file diff --git a/www/docs/src/theme/CopyButton/index.js b/www/docs/src/theme/CopyButton/index.js index 4517b7bdd6..b778c9bbb4 100644 --- a/www/docs/src/theme/CopyButton/index.js +++ b/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'; diff --git a/www/docs/src/theme/Tooltip/index.js b/www/docs/src/theme/Tooltip/index.js index 4d8c6f2015..8445a36f4b 100644 --- a/www/docs/src/theme/Tooltip/index.js +++ b/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 ( - <> - + + {text} + + setShow(true)} + onMouseLeave={() => setShow(false)} + {...rest} > {children} - - + ); }; \ No newline at end of file diff --git a/www/docs/yarn.lock b/www/docs/yarn.lock index 5c6c0c6576..7b1835dc98 100644 --- a/www/docs/yarn.lock +++ b/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"