From 58dd2d939ad9895d472625ce7fb8ae5f9e53c8ba Mon Sep 17 00:00:00 2001
From: Mishti Gala <mishtigala19@gmail.com>
Date: Wed, 30 Jul 2025 16:09:05 +0530
Subject: [PATCH] Add tooltip to LocationSelector and VisibilitySelector

---
 .../ActionButton/LocationSelector.tsx         | 38 +++++++++++++------
 .../ActionButton/VisibilitySelector.tsx       | 36 +++++++++++-------
 2 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index ce6d2ad00..f58c5938d 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Location } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface Props {
   location?: Location;
@@ -94,19 +95,32 @@ const LocationSelector = (props: Props) => {
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size={props.location ? undefined : "icon"}>
-          <MapPinIcon className="size-5 shrink-0" />
-          {props.location && (
-            <>
-              <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">{props.location.placeholder}</span>
-              <span className="cursor-pointer hover:text-primary" onClick={removeLocation}>
-                <XIcon className="size-4 shrink-0" />
-              </span>
-            </>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size={props.location ? undefined : "icon"}>
+                <MapPinIcon className="size-5 shrink-0" />
+                {props.location && (
+                  <>
+                    <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">
+                      {props.location.placeholder}
+                    </span>
+                    <span className="ml-1 cursor-pointer hover:text-primary" onClick={removeLocation}>
+                      <XIcon className="size-4 shrink-0" />
+                    </span>
+                  </>
+                )}
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          {!props.location && (
+            <TooltipContent side="bottom">
+              <p>{t("tooltip.select-location")}</p>
+            </TooltipContent>
           )}
-        </Button>
-      </PopoverTrigger>
+        </Tooltip>
+      </TooltipProvider>
       <PopoverContent align="center">
         <div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
diff --git a/web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx b/web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx
index b25dfa918..f814bb656 100644
--- a/web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx
@@ -2,6 +2,7 @@ import VisibilityIcon from "@/components/VisibilityIcon";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Visibility } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; // ⬅️ ADD this line
 
 interface Props {
   value: Visibility;
@@ -26,19 +27,28 @@ const VisibilitySelector = (props: Props) => {
   };
 
   return (
-    <Select value={value.toString()} onValueChange={onChange} onOpenChange={handleOpenChange}>
-      <SelectTrigger size="xs" className="!bg-background">
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent align="end">
-        {visibilityOptions.map((option) => (
-          <SelectItem key={option.value} value={option.value.toString()}>
-            <VisibilityIcon className="size-3.5" visibility={option.value} />
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Select value={value.toString()} onValueChange={onChange} onOpenChange={handleOpenChange}>
+            <SelectTrigger size="xs" className="!bg-background">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent align="end">
+              {visibilityOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value.toString()}>
+                  <VisibilityIcon className="size-3.5" visibility={option.value} />
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>{t("memo.visibility-tooltip")}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 };