added tooltips for all the btns in comment card (#6952)

app/client/src/comments/CommentCard/CommentContextMenu.tsx

@@ -9,12 +9,14 @@ import {
   UNPIN_COMMENT,
   createMessage,
   EDIT_COMMENT,
+  MORE_OPTIONS,
 } from "constants/messages";
 import { noop } from "lodash";
 
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
 import { Popover2 } from "@blueprintjs/popover2";
+import Tooltip from "components/ads/Tooltip";
 
 // render over popover portals
 const Container = styled.div``;
@@ -149,7 +151,9 @@ function CommentContextMenu({
       placement={"bottom-end"}
       portalClassName="comment-context-menu"
     >
-      <StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
+      <Tooltip content={createMessage(MORE_OPTIONS)}>
+        <StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
+      </Tooltip>
     </Popover2>
   );
 }

app/client/src/comments/CommentCard/ResolveCommentButton.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import styled, { withTheme } from "styled-components";
 import Icon, { IconSize } from "components/ads/Icon";
 import { Theme } from "constants/DefaultTheme";
+import Tooltip from "components/ads/Tooltip";
+import { createMessage, RESOLVE_THREAD } from "constants/messages";
 
 const Container = styled.div`
   display: flex;
@@ -52,14 +54,16 @@ const ResolveCommentButton = withTheme(
 
     return (
       <Container onClick={_handleClick}>
-        <StyledResolveIcon
-          fillColor={fillColor}
-          keepColors
-          name="oval-check"
-          size={IconSize.XXL}
-          strokeColorCircle={strokeColorCircle}
-          strokeColorPath={strokeColorPath}
-        />
+        <Tooltip content={createMessage(RESOLVE_THREAD)}>
+          <StyledResolveIcon
+            fillColor={fillColor}
+            keepColors
+            name="oval-check"
+            size={IconSize.XXL}
+            strokeColorCircle={strokeColorCircle}
+            strokeColorPath={strokeColorPath}
+          />
+        </Tooltip>
       </Container>
     );
   },

app/client/src/components/ads/EmojiPicker.tsx

@@ -7,6 +7,8 @@ import { withTheme } from "styled-components";
 import { Theme } from "constants/DefaultTheme";
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 import "emoji-mart/css/emoji-mart.css";
+import Tooltip from "components/ads/Tooltip";
+import { ADD_REACTION, createMessage, EMOJI } from "constants/messages";
 
 const EmojiPicker = withTheme(
   ({
@@ -50,12 +52,14 @@ const EmojiPicker = withTheme(
         }}
         portalClassName="emoji-picker-portal"
       >
-        <Icon
-          fillColor={theme.colors.comments.emojiPicker}
-          keepColors
-          name={iconName || "emoji"}
-          size={iconSize || IconSize.XXXL}
-        />
+        <Tooltip content={createMessage(iconName ? ADD_REACTION : EMOJI)}>
+          <Icon
+            fillColor={theme.colors.comments.emojiPicker}
+            keepColors
+            name={iconName || "emoji"}
+            size={iconSize || IconSize.XXXL}
+          />
+        </Tooltip>
       </Popover2>
     );
   },

app/client/src/constants/messages.ts

@@ -469,3 +469,9 @@ export const MERGE_CHANGES = () => "Merge Changes";
 export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge";
 
 export const DOWNLOAD_FILE_NAME_ERROR = () => "File name was not provided";
+
+// Comment card tooltips
+export const MORE_OPTIONS = () => "More Options";
+export const ADD_REACTION = () => "Add Reaction";
+export const RESOLVE_THREAD = () => "Resolve Thread";
+export const EMOJI = () => "Emoji";