Add tooltips

Author: NirajC-Microsoft

src/frontend/src/components/common/TeamSelector.tsx

@@ -481,13 +481,21 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
             />
           </Tooltip>
         ) : (
-          <Button
-            icon={<DeleteRegular />}
-            appearance="subtle"
-            size="small"
-            onClick={(e: React.MouseEvent) => handleDeleteTeam(team, e)}
-            className={styles.deleteButton}
-          />
+          <Tooltip
+            content="Delete"
+            relationship="label"
+            positioning="above"
+            withArrow
+            mountNode={document.querySelector('[role="dialog"]') || undefined}
+          >
+            <Button
+              icon={<DeleteRegular />}
+              appearance="subtle"
+              size="small"
+              onClick={(e: React.MouseEvent) => handleDeleteTeam(team, e)}
+              className={styles.deleteButton}
+            />
+          </Tooltip>
         )}
       </div>
     );
@@ -516,13 +524,20 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
         <DialogSurface className={styles.dialogSurface}>
           <DialogTitle className={styles.dialogTitle}>
             <span>Select a Team</span>
-            <Button
-              icon={<Dismiss20Regular />}
-              appearance="subtle"
-              size="small"
-              onClick={handleCancel}
-              className={styles.closeButton}
-            />
+            <Tooltip
+              content="Close"
+              relationship="label"
+              positioning="below"
+              withArrow
+            >
+              <Button
+                icon={<Dismiss20Regular />}
+                appearance="subtle"
+                size="small"
+                onClick={handleCancel}
+                className={styles.closeButton}
+              />
+            </Tooltip>
           </DialogTitle>
           <DialogContent className={styles.dialogContent}>
             <DialogBody className={styles.dialogBody}>

src/frontend/src/components/content/HomeInput.tsx

@@ -2,7 +2,8 @@ import {
   Body1Strong,
   Button,
   Caption1,
-  Title2
+  Title2,
+  Tooltip
 } from "@fluentui/react-components";
 
 import React, { useRef, useEffect, useState } from "react";
@@ -226,14 +227,20 @@ const HomeInput: React.FC<HomeInputProps> = ({ selectedTeam }) => {
             onChange={setInput}
             onEnter={handleSubmit}
             disabledChat={submitting}
+          >
+            <Tooltip
+            content="Send"
+            relationship="label"
+            positioning="above"
+            withArrow
           >
             <Button
               appearance="subtle"
               className="home-input-send-button"
               onClick={handleSubmit}
               disabled={submitting}
               icon={<Send />}
-            />
+            /></Tooltip>
           </ChatInput>
 
           <InlineToaster />

src/frontend/src/components/content/PlanChatBody.tsx

@@ -1,6 +1,6 @@
 import ChatInput from "@/coral/modules/ChatInput";
 import { PlanChatProps } from "@/models";
-import { Button } from "@fluentui/react-components";
+import { Button, Tooltip } from "@fluentui/react-components";
 import { Send } from "@/coral/imports/bundleicons";
 
 interface SimplifiedPlanChatProps extends PlanChatProps {
@@ -51,6 +51,12 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
                     boxSizing: 'border-box',
                 }}
             >
+                <Tooltip
+                    content="Send"
+                    relationship="label"
+                    positioning="above"
+                    withArrow
+                >
                 <Button
                     appearance="subtle"
                     className="home-input-send-button"
@@ -69,6 +75,7 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
                         flexShrink: 0,
                     }}
                 />
+                </Tooltip>
             </ChatInput>
         </div>
     );