Add tooltips to facility, organization, and patient switchers (#10766)

ohcnetwork · Feb 27, 2025 · 4748ab7 · 4748ab7
1 parent 7bb209d
commit 4748ab7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 37 deletions.
diff --git a/src/components/ui/sidebar/facility-switcher.tsx b/src/components/ui/sidebar/facility-switcher.tsx
@@ -40,6 +40,7 @@ export function FacilitySwitcher({
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-white"
+              tooltip={selectedFacility?.name}
             >
               <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-sidebar-primary-foreground">
                 <Hospital className="size-4" />

diff --git a/src/components/ui/sidebar/organization-switcher.tsx b/src/components/ui/sidebar/organization-switcher.tsx
@@ -42,6 +42,11 @@ export function OrganizationSwitcher({
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-white"
+              tooltip={
+                selectedOrganization
+                  ? t("my_organizations")
+                  : t("select_organization")
+              }
             >
               <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-sidebar-primary-foreground">
                 <Globe className="size-4" />

diff --git a/src/components/ui/sidebar/patient-switcher.tsx b/src/components/ui/sidebar/patient-switcher.tsx
@@ -10,6 +10,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useSidebar } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 
@@ -48,43 +53,56 @@ export function PatientSwitcher({ className }: PatientSwitcherProps) {
           }
         }}
       >
-        <SelectTrigger>
-          <SelectValue
-            asChild
-            placeholder={
-              patientUserContext.patients?.length === 0
-                ? t("no_patients")
-                : t("select_patient")
-            }
-          >
-            <>
-              {open && (
-                <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800">
-                  <Avatar
-                    name={patientUserContext.selectedPatient?.name || "User"}
-                    className="h-5 w-5"
-                  />
-                  <div className="flex flex-row items-center justify-between w-full gap-2">
-                    <span className="font-semibold truncate max-w-32">
-                      {patientUserContext.selectedPatient?.name}
-                    </span>
-                    <span className="text-xs text-secondary-600">
-                      {t("switch")}
-                    </span>
-                  </div>
-                </div>
-              )}
-              {!open && (
-                <div className="flex flex-row items-center -ml-1.5">
-                  <Avatar
-                    name={patientUserContext.selectedPatient?.name || "User"}
-                    className="h-4 w-4"
-                  />
-                </div>
-              )}
-            </>
-          </SelectValue>
-        </SelectTrigger>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <SelectTrigger>
+              <SelectValue
+                asChild
+                placeholder={
+                  patientUserContext.patients?.length === 0
+                    ? t("no_patients")
+                    : t("select_patient")
+                }
+              >
+                <>
+                  {open && (
+                    <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800">
+                      <Avatar
+                        name={
+                          patientUserContext.selectedPatient?.name || "User"
+                        }
+                        className="h-5 w-5"
+                      />
+                      <div className="flex flex-row items-center justify-between w-full gap-2">
+                        <span className="font-semibold truncate max-w-32">
+                          {patientUserContext.selectedPatient?.name}
+                        </span>
+                        <span className="text-xs text-secondary-600">
+                          {t("switch")}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  {!open && (
+                    <div className="flex flex-row items-center -ml-1.5">
+                      <Avatar
+                        name={
+                          patientUserContext.selectedPatient?.name || "User"
+                        }
+                        className="h-4 w-4"
+                      />
+                    </div>
+                  )}
+                </>
+              </SelectValue>
+            </SelectTrigger>
+          </TooltipTrigger>
+          {!open && (
+            <TooltipContent side="right" align="center">
+              <p>{patientUserContext.selectedPatient?.name}</p>
+            </TooltipContent>
+          )}
+        </Tooltip>
         <SelectContent>
           {patientUserContext.patients?.map((patient) => (
             <SelectItem key={patient.id} value={patient.id}>