Add tooltip to HistoryIcon

1 files changed, 19 insertions, 1 deletions

diff --git a/frontend/src/components/bazarr/HistoryIcon.tsx b/frontend/src/components/bazarr/HistoryIcon.tsx
index 176668708..e6c0f2411 100644
--- a/frontend/src/components/bazarr/HistoryIcon.tsx
+++ b/frontend/src/components/bazarr/HistoryIcon.tsx
@@ -9,6 +9,7 @@ import {
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from "@mantine/core";
 import { FunctionComponent } from "react";
 
 enum HistoryAction {
@@ -26,35 +27,52 @@ const HistoryIcon: FunctionComponent<{
   title?: string;
 }> = ({ action, title }) => {
   let icon = null;
+  let label = "Unknown";
   switch (action) {
     case HistoryAction.Delete:
       icon = faTrash;
+      label = "Delete";
       break;
     case HistoryAction.Download:
       icon = faDownload;
+      label = "Download";
       break;
     case HistoryAction.Manual:
       icon = faUser;
+      label = "Manual";
       break;
     case HistoryAction.Sync:
       icon = faClock;
+      label = "Sync";
       break;
     case HistoryAction.Upgrade:
       icon = faRecycle;
+      label = "Upgrade";
       break;
     case HistoryAction.Upload:
       icon = faCloudUploadAlt;
+      label = "Upload";
       break;
     case HistoryAction.Translated:
       icon = faLanguage;
+      label = "Translated";
       break;
     default:
       icon = faClosedCaptioning;
+      label = "Unknown";
       break;
   }
 
   if (icon) {
-    return <FontAwesomeIcon title={title} icon={icon}></FontAwesomeIcon>;
+    return (
+      <Tooltip label={label} openDelay={500} position="right">
+        <FontAwesomeIcon
+          aria-label={label}
+          title={title}
+          icon={icon}
+        ></FontAwesomeIcon>
+      </Tooltip>
+    );
   } else {
     return null;
   }