Add Tooltip

Author: NirajC-Microsoft

App/frontend-app/src/components/chat/chatRoom.tsx

@@ -594,7 +594,9 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
                     disabled={isLoading}
                     onSubmit={handleSend}
                     disableSend = {textAreaValue.trim().length === 0 || isLoading}
-                    contentAfter={undefined}
+                    send={{
+                        title: "Send"
+                    }}
                 />
             </div>
         </div >

App/frontend-app/src/components/documentViewer/dialogTitleBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Divider, Text, Tab, TabList, SelectTabEvent, SelectTabData, DialogTrigger } from '@fluentui/react-components';
+import { Button, Divider, Text, Tab, TabList, SelectTabEvent, SelectTabData, DialogTrigger, Tooltip } from '@fluentui/react-components';
 import { Dismiss24Regular, ArrowHookDownLeft16Filled, SparkleFilled, DocumentBulletListMultipleRegular, DocumentBulletListRegular, LayerDiagonalSparkle24Regular, InfoRegular } from '@fluentui/react-icons';
 import { DialogTitle } from '@fluentui/react-components';
 import { KMBrandRamp } from '../../styles';
@@ -66,12 +66,14 @@ export function DialogTitleBar({
       style={{ width: "100%" }}
       action={
         <DialogTrigger action="close">
-          <Button
-            appearance="subtle"
-            aria-label="close"
-            icon={<Dismiss24Regular />}
-            onClick={handleDialogClose}
-          />
+          <Tooltip content="Close" relationship="label" withArrow>
+            <Button
+              appearance="subtle"
+              aria-label="close"
+              icon={<Dismiss24Regular />}
+              onClick={handleDialogClose}
+            />
+          </Tooltip>
         </DialogTrigger>
       }
     >

App/frontend-app/src/components/pagination/pagination.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@fluentui/react-components";
+import { Button, Tooltip } from "@fluentui/react-components";
 import { DOTS, usePagination } from "../../utils/customHooks/usePagination";
 import { useState } from "react";
 import { ChevronLeft24Regular, ChevronRight24Regular } from "@fluentui/react-icons";
@@ -55,9 +55,19 @@ export function Pagination({ totalCount, pageSize, currentPage, siblingCount = 1
 
     return (
         <ul className="flex flex-wrap">
-            <Button icon={<ChevronLeft24Regular />} className="h-8" appearance="subtle" onClick={onPrevious} disabled={isDisabled || isLeftArrowDisabled}></Button>
+            <Tooltip 
+              content="Previous" 
+              relationship="label" 
+              withArrow>
+                <Button icon={<ChevronLeft24Regular />} className="h-8" appearance="subtle" onClick={onPrevious} disabled={isDisabled || isLeftArrowDisabled}></Button>
+            </Tooltip>
             {items}
-            <Button icon={<ChevronRight24Regular />} className="h-8" appearance="subtle" onClick={onNext} disabled={isDisabled || isRightArrowDisabled}></Button>
+            <Tooltip 
+            content="Next" 
+            relationship="label" 
+            withArrow>
+                <Button icon={<ChevronRight24Regular />} className="h-8" appearance="subtle" onClick={onNext} disabled={isDisabled || isRightArrowDisabled}></Button>
+            </Tooltip>
         </ul>
     );
 }