From a0894c5f69c1cfac3a02f4018579d566806508f7 Mon Sep 17 00:00:00 2001
From: Bhavik Agarwal <73033511+Bhavik-ag@users.noreply.github.com>
Date: Fri, 26 May 2023 17:40:51 +0530
Subject: [PATCH] Added tooltip on occupancy chip in facility card (#5539)

* Added tooltip on occupancy chip

* nihal said to make it placed right, so... here it is

* fix clipping in mobile

---------

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
---
 src/Components/Facility/FacilityCard.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 7203d430225..ae256986d25 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -47,7 +47,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
 
   return (
     <div key={`usr_${facility.id}`} className="w-full">
-      <div className="block rounded-lg h-full overflow-clip bg-white shadow hover:border-primary-500">
+      <div className="block rounded-lg h-full bg-white shadow hover:border-primary-500">
         <div className="flex h-full">
           <Link
             href={`/facility/${facility.id}`}
@@ -158,13 +158,15 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   <div className="flex justify-between w-full flex-wrap gap-2">
                     <div className="flex gap-2">
                       <div
-                        className={`flex items-center justify-center rounded-md text-xl h-[38px] w-fit px-2 ml-auto ${
+                        className={`flex items-center tooltip justify-center rounded-md text-xl h-[38px] w-fit px-2 ml-auto ${
                           facility.patient_count / facility.bed_count > 0.85
                             ? "bg-red-500 button-danger-border"
                             : "bg-primary-100 button-primary-border"
                         }`}
                       >
-                        {" "}
+                        <span className="tooltip-text tooltip-right -translate-y-2">
+                          Live Patients / Total beds
+                        </span>{" "}
                         <CareIcon
                           className={`care-l-bed text-${
                             facility.patient_count / facility.bed_count > 0.85