fix: added tooltips for Discussion Notes icons (#8618)

src/Components/Facility/PatientNoteCard.tsx

@@ -144,12 +144,19 @@ const PatientNoteCard = ({
                 </ButtonV2>
               )}
             <ButtonV2
+              className="tooltip"
               ghost
               onClick={() => {
                 setReplyTo && setReplyTo(note);
               }}
             >
-              <CareIcon icon="l-corner-up-left-alt" className="h-5 w-5" />
+              <CareIcon
+                icon="l-corner-up-left-alt"
+                className="tooltip h-5 w-5"
+              />
+              <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
+                {t("reply")}
+              </span>
             </ButtonV2>
           </div>
         </div>

src/Components/Facility/PatientNotesSlideover.tsx

@@ -137,36 +137,45 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     <div className="flex gap-1">
       {show && (
         <Link
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+          className="tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
           href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`}
         >
           <CareIcon
             icon="l-window-maximize"
-            className="text-lg transition-all delay-150 duration-300 ease-out"
+            className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
           />
+          <span className="tooltip-text tooltip-bottom -translate-x-[7.3rem] text-xs">
+            {t(`open_in_full_window`)}
+          </span>
         </Link>
       )}
       <div
         id="expand_doctor_notes"
         className={classNames(
-          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
+          "tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
           show && "rotate-180",
         )}
         onClick={() => setShow(!show)}
       >
         <CareIcon
           icon="l-angle-up"
-          className="text-lg transition-all delay-150 duration-300 ease-out"
+          className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
         />
+        <span className="tooltip-text tooltip-top rotate-[-180deg] text-xs">
+          {t(`minimize_screen`)}
+        </span>
       </div>
       <div
-        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+        className="tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
         onClick={() => setShowPatientNotesPopup(false)}
       >
         <CareIcon
           icon="l-times"
-          className="text-lg transition-all delay-150 duration-300 ease-out"
+          className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
         />
+        <span className="tooltip-text tooltip-bottom -translate-x-11 text-xs">
+          {t(`close_screen`)}
+        </span>
       </div>
     </div>
   );
@@ -248,13 +257,16 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
                 id="add_doctor_note_button"
                 onClick={onAddNote}
                 border={false}
-                className="absolute right-2"
+                className="tooltip absolute right-2"
                 ghost
                 size="small"
                 disabled={!patientActive}
                 authorizeFor={NonReadOnlyUsers}
               >
-                <CareIcon icon="l-message" className="text-lg" />
+                <CareIcon icon="l-message" className="tooltip text-lg" />
+                <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
+                  {t("send_message")}
+                </span>
               </ButtonV2>
             </div>
           </DoctorNoteReplyPreviewCard>

src/Locale/en/Common.json

@@ -231,6 +231,11 @@
   "SORT_OPTIONS__-name": "Patient name Z-A",
   "SORT_OPTIONS__bed__name": "Bed No. 1-N",
   "SORT_OPTIONS__-bed__name": "Bed No. N-1",
+  "open_in_full_window": "Open in full window",
+  "minimize_screen":"Minimize",
+  "close_screen":"Close",
+  "send_discussion_message":"Send",
+  "reply":"Reply",
   "middleware_hostname": "Middleware Hostname",
   "local_ipaddress": "Local IP Address"
 }