feat: display tooltips for some elements

package-lock.json

@@ -15073,6 +15073,22 @@
         }
       }
     },
+    "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

@@ -28,6 +28,7 @@
     "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 { 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";
@@ -118,6 +119,7 @@ const BaseApp = () => {
         </Switch>
         <Footer />
       </Router>
+      <ReactTooltip effect="solid" className="tooltip tooltip--default" />
     </HelmetProvider>
   );
 };

src/components/Navbar.jsx

@@ -39,7 +39,8 @@ const Navbar = () => {
     <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
       <span
         className="relative inline-flex h-4 w-4 mr-4"
-        title={connectionStateCaption}
+        data-tip={connectionStateCaption}
+        aria-label={connectionStateCaption}
       >
         <span
           className={classNames(
@@ -126,7 +127,9 @@ const Navbar = () => {
                   <button
                     onClick={logout}
                     className="text-grey-200 hover:text-white"
-                    title="Odhlásit se"
+                    aria-label="Odhlásit se"
+                    data-tip="Odhlásit se"
+                    data-place="bottom"
                   >
                     <i className="ico--log-out"></i>
                   </button>

src/components/modals/ModalWithActions.jsx

@@ -25,7 +25,12 @@ const ModalConfirm = ({
         <CardBody>
           <div className="flex items-center justify-between mb-4">
             <CardHeadline>{title}</CardHeadline>
-            <button onClick={onClose} type="button">
+            <button
+              onClick={onClose}
+              type="button"
+              data-tip="Zavřít"
+              aria-label="Zavřít"
+            >
               <i className="ico--cross"></i>
             </button>
           </div>

src/components/posts/Post.jsx

@@ -89,7 +89,7 @@ const Post = ({
             key="state__pending"
             condensed
             color="grey-500"
-            title="Návrh čekající na zpracování"
+            aria-label="Návrh čekající na zpracování"
           >
             Čeká na zpracování
           </Chip>
@@ -99,7 +99,7 @@ const Post = ({
             key="state__announced"
             condensed
             color="blue-300"
-            title="Návrh k hlasování"
+            aria-label="Návrh k hlasování"
           >
             K hlasování
           </Chip>
@@ -109,7 +109,7 @@ const Post = ({
             key="state__accepted"
             condensed
             color="green-400"
-            title="Schválený návrh"
+            aria-label="Schválený návrh"
           >
             Schválený
           </Chip>
@@ -119,7 +119,7 @@ const Post = ({
             key="state__rejected"
             condensed
             color="red-600"
-            title="Zamítnutý návrh"
+            aria-label="Zamítnutý návrh"
           >
             Zamítnutý
           </Chip>
@@ -129,7 +129,7 @@ const Post = ({
             key="state__rejected-by-chairmen"
             condensed
             color="red-600"
-            title="Návrh zamítnutý předsedajícím"
+            aria-label="Návrh zamítnutý předsedajícím"
           >
             Zamítnutý předs.
           </Chip>

src/components/posts/PostScore.jsx

@@ -49,7 +49,10 @@ const PostScore = ({
         className
       )}
       style={{ cursor: "help" }}
-      title={title}
+      aria-label={title}
+      data-tip={title}
+      data-type="dark"
+      data-place="top"
     >
       <i className="ico--power" />
       <span className="font-bold">{score}</span>

src/containers/JitsiInviteCard.jsx

@@ -55,7 +55,12 @@ const JitsiInviteCard = () => {
           <h2 className="head-heavy-xs">
             <span>Pozvánka do Jitsi</span>
           </h2>
-          <button type="button" onClick={dismissPopup}>
+          <button
+            type="button"
+            onClick={dismissPopup}
+            aria-label="Zavřít"
+            data-tip="Zavřít"
+          >
             <i className="ico--cross"></i>
           </button>
         </div>