fix: added tooltip for Discussion Notes Icons #8618

src/Components/Facility/PatientNoteCard.tsx

@@ -135,21 +135,32 @@ const PatientNoteCard = ({
               note.created_by_object.id === authUser.id &&
               !isEditing && (
                 <ButtonV2
+                  className="tooltip"
                   ghost
                   onClick={() => {
                     setIsEditing(true);
                   }}
                 >
                   <CareIcon icon="l-pen" className="h-5 w-5" />
+                  <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
+                    {t("edit")}
+                  </span>
                 </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-[4.9rem] text-xs">
+            {t("full_screen")}
+          </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")}
+        </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")}
+        </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")}
+                </span>
               </ButtonV2>
             </div>
           </DoctorNoteReplyPreviewCard>

src/Locale/en.json

@@ -813,6 +813,7 @@
   "middleware_hostname_sourced_from": "Middleware hostname sourced from {{ source }}",
   "min_password_len_8": "Minimum password length 8",
   "min_time_bw_doses": "Min. time b/w doses",
+  "minimize": "Minimize",
   "mobile": "Mobile",
   "mobile_number": "Mobile Number",
   "mobile_number_different_from_aadhaar_mobile_number": "We have noticed that you have entered a mobile number that is different from the one linked to your Aadhaar. We will send an OTP to this number to link it with your Abha number.",
@@ -1024,6 +1025,7 @@
   "reload": "Reload",
   "remove": "Remove",
   "rename": "Rename",
+  "reply": "Reply",
   "report": "Report",
   "req_atleast_one_digit": "Require at least one digit",
   "req_atleast_one_lowercase": "Require at least one lower case letter",
@@ -1086,6 +1088,7 @@
   "select_policy_to_add_items": "Select a Policy to Add Items",
   "select_skills": "Select and add some skills",
   "select_wards": "Select wards",
+  "send": "Send",
   "send_email": "Send Email",
   "send_message": "Send Message",
   "send_otp": "Send OTP",