add tooltips

web/public/locales/en/views/events.json

@@ -13,6 +13,8 @@
   },
   "timeline": "Timeline",
   "timeline.aria": "Select timeline",
+  "zoomIn": "Zoom In",
+  "zoomOut": "Zoom Out",
   "events": {
     "label": "Events",
     "aria": "Select events",

web/src/components/timeline/ReviewTimeline.tsx

@@ -15,6 +15,9 @@ import {
 import { isIOS, isMobile } from "react-device-detect";
 import { Button } from "../ui/button";
 import { LuZoomIn, LuZoomOut } from "react-icons/lu";
+import { useTranslation } from "react-i18next";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
@@ -73,6 +76,7 @@ export function ReviewTimeline({
   currentZoomLevel,
   children,
 }: ReviewTimelineProps) {
+  const { t } = useTranslation("views/events");
   const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
   const [isDraggingExportStart, setIsDraggingExportStart] = useState(false);
   const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
@@ -515,6 +519,8 @@ export function ReviewTimeline({
               : "bottom-2 left-1/2 -translate-x-1/2"
           }`}
         >
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Button
                 onClick={(e) => {
                   const newLevel = Math.max(0, currentZoomLevelIndex - 1);
@@ -528,6 +534,13 @@ export function ReviewTimeline({
               >
                 <LuZoomOut className={cn("size-5 text-primary-variant")} />
               </Button>
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent>{t("zoomIn")}</TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Button
                 onClick={(e) => {
                   const newLevel = Math.min(
@@ -544,6 +557,11 @@ export function ReviewTimeline({
               >
                 <LuZoomIn className={cn("size-5 text-primary-variant")} />
               </Button>
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent>{t("zoomOut")}</TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
         </div>
       )}
     </>