feat: add tooltips to editor buttons (#4934)

Co-authored-by: Anthony Cooper <antcoop096@gmail.com>
Co-authored-by: aarohee-he <aarohee-he@users.noreply.github.com>
Co-authored-by: Mishti Gala <mishtigala19@gmail.com>

web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx

@@ -13,6 +13,7 @@ import { extractUserIdFromName } from "@/store/common";
 import { Memo, MemoRelation_Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import { MemoEditorContext } from "../types";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 const AddMemoRelationPopover = () => {
   const t = useTranslate();
@@ -95,11 +96,20 @@ const AddMemoRelationPopover = () => {
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <LinkIcon className="size-5" />
-        </Button>
-      </PopoverTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <LinkIcon className="size-5" />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{t("tooltip.link-memo")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <PopoverContent align="center">
         <div className="w-[16rem] p-1 flex flex-col justify-start items-start">
           {/* Search and selection interface */}

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} />

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -3,6 +3,8 @@ import { Button } from "@/components/ui/button";
 import { useTranslate } from "@/utils/i18n";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu";
 import { EditorRefActions } from "../Editor";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
+
 
 interface Props {
   editorRef: React.RefObject<EditorRefActions>;
@@ -61,11 +63,20 @@ const MarkdownMenu = (props: Props) => {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <SquareSlashIcon className="size-5" />
-        </Button>
-      </DropdownMenuTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <SquareSlashIcon className="size-5" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{t("tooltip.markdown-menu")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <DropdownMenuContent align="start">
         <DropdownMenuItem onClick={handleCodeBlockClick}>
           <Code2Icon className="w-4 h-auto text-muted-foreground" />

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -6,6 +6,7 @@ import { userStore } from "@/store";
 import { useTranslate } from "@/utils/i18n";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
 import { EditorRefActions } from "../Editor";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
 
 interface Props {
   editorRef: React.RefObject<EditorRefActions>;
@@ -34,11 +35,20 @@ const TagSelector = observer((props: Props) => {
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <HashIcon className="size-5" />
-        </Button>
-      </PopoverTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <HashIcon className="size-5" />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{t("tooltip.tags")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <PopoverContent align="start" sideOffset={2}>
         {tags.length > 0 ? (
           <div className="flex flex-row justify-start items-start flex-wrap px-2 max-w-48 h-auto max-h-48 overflow-y-auto gap-x-2">

web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx

@@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button";
 import { attachmentStore } from "@/store";
 import { Attachment } from "@/types/proto/api/v1/attachment_service";
 import { MemoEditorContext } from "../types";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { t } from "i18next";
 
 interface Props {
   isUploading?: boolean;
@@ -73,19 +75,28 @@ const UploadAttachmentButton = observer((props: Props) => {
   const isUploading = state.uploadingFlag || props.isUploading;
 
   return (
-    <Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
-      {isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
-      <input
-        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-        ref={fileInputRef}
-        disabled={isUploading}
-        onChange={handleFileInputChange}
-        type="file"
-        id="files"
-        multiple={true}
-        accept="*"
-      />
-    </Button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
+            {isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
+            <input
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              ref={fileInputRef}
+              disabled={isUploading}
+              onChange={handleFileInputChange}
+              type="file"
+              id="files"
+              multiple={true}
+              accept="*"
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{t("tooltip.upload-attachment")}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 });
 

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="bottom">
+          <p>{t("tooltip.select-visibility")}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 };
 

web/src/locales/en.json

@@ -443,5 +443,13 @@
     "rename-success": "Renamed tag successfully",
     "rename-tag": "Rename tag",
     "rename-tip": "All your memos with this tag will be updated."
+  },
+  "tooltip": {
+    "link-memo": "Link Memo", 
+    "markdown-menu": "Markdown",
+    "select-location": "Location",
+    "select-visibility": "Visibility", 
+    "tags": "Tags",
+    "upload-attachment":  "Upload Attachment(s)"
   }
 }