feat: update to styleguide 2.2.1 and user different tooltip lib

.env

-REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.2.0
+REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.2.1
 REACT_APP_API_BASE_URL=https://cf2021.pir-test.eu/api
 REACT_APP_MATOMO_ID=135
 REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14

package-lock.json

@@ -14612,6 +14612,11 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-hint": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-hint/-/react-hint-3.2.0.tgz",
+      "integrity": "sha512-ceKa6GaWtXEvj9eb1eOIpRouurb6WLV5fmApKNcxNbpY9xQkO6++1mXij9tlwGh4Ad/Vvv2pqlmoW17LIn1QTA=="
+    },
     "react-intersection-observer": {
       "version": "8.31.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz",
@@ -15073,22 +15078,6 @@
         }
       }
     },
-    "react-tooltip": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.11.tgz",
-      "integrity": "sha512-exREte3mK/qbeuQpFbEL3ImdF5/TSAb+x/T7pkVfKmgVcfQLZKHSgLN+Msv7ZOHxaWNJwuCrSsCAy/iTGoPigg==",
-      "requires": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
-        }
-      }
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet-async": "^1.0.7",
+    "react-hint": "^3.2.0",
     "react-intersection-observer": "^8.31.0",
     "react-joyride": "^2.3.0",
     "react-mde": "^11.0.0",
@@ -28,7 +29,6 @@
     "react-player": "^2.7.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "react-tooltip": "^4.2.11",
     "showdown": "^1.9.1",
     "unfetch": "^4.2.0",
     "wait-queue": "^1.1.4",

src/App.jsx

 import React, { Suspense, useEffect } from "react";
 import { Helmet, HelmetProvider } from "react-helmet-async";
+import ReactHintFactory from "react-hint";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import ReactTooltip from "react-tooltip";
 import { KeycloakProvider } from "@react-keycloak/web";
 import { ExtraErrorData } from "@sentry/integrations/dist/extraerrordata";
 import * as Sentry from "@sentry/react";
@@ -37,6 +37,8 @@ if (process.env.REACT_APP_SENTRY_DSN) {
   });
 }
 
+const ReactHint = ReactHintFactory(React);
+
 const onKeycloakEvent = (event) => {
   if (["onAuthRefreshSuccess", "onAuthSuccess"].includes(event)) {
     Sentry.setUser(keycloak.tokenParsed);
@@ -119,7 +121,7 @@ const BaseApp = () => {
         </Switch>
         <Footer />
       </Router>
-      <ReactTooltip effect="solid" className="tooltip tooltip--default" />
+      <ReactHint autoPosition events attribute="data-tip" className="tooltip" />
     </HelmetProvider>
   );
 };

src/components/Navbar.jsx

@@ -40,6 +40,7 @@ const Navbar = () => {
       <span
         className="relative inline-flex h-4 w-4 mr-4"
         data-tip={connectionStateCaption}
+        data-tip-at="left"
         aria-label={connectionStateCaption}
       >
         <span
@@ -129,7 +130,7 @@ const Navbar = () => {
                     className="text-grey-200 hover:text-white"
                     aria-label="Odhlásit se"
                     data-tip="Odhlásit se"
-                    data-place="bottom"
+                    data-tip-at="bottom"
                   >
                     <i className="ico--log-out"></i>
                   </button>