Occupancy bed tooltip fully visible in mobile view

src/components/Common/Sidebar/Sidebar.tsx

@@ -6,12 +6,7 @@ import { useTranslation } from "react-i18next";
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
 
 import {
   ShrinkedSidebarItem,
@@ -243,24 +238,19 @@ const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => {
   const { t } = useTranslation();
   return (
     <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${
-              shrinked ? "mx-auto" : "mr-4"
-            } transition-all ease-in-out`}
-            onClick={toggle}
-          >
-            <CareIcon
-              icon={shrinked ? "l-arrow-bar-right" : "l-layout-sidebar-alt"}
-              className="text-lg transition"
-            />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>{shrinked ? t("expand_sidebar") : t("collapse_sidebar")}</p>
-        </TooltipContent>
-      </Tooltip>
+      <TooltipComponent
+        content={shrinked ? t("expand_sidebar") : t("collapse_sidebar")}
+      >
+        <button
+          className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${shrinked ? "mx-auto" : "mr-4"} transition-all ease-in-out`}
+          onClick={toggle}
+        >
+          <CareIcon
+            icon={shrinked ? "l-arrow-bar-right" : "l-layout-sidebar-alt"}
+            className="text-lg transition"
+          />
+        </button>
+      </TooltipComponent>
     </TooltipProvider>
   );
 };

src/components/Facility/FacilityCard.tsx

@@ -6,12 +6,7 @@ import { useTranslation } from "react-i18next";
 import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
@@ -36,7 +31,6 @@ export const FacilityCard = (props: {
   const [notifyModalFor, setNotifyModalFor] = useState<string>();
   const [notifyMessage, setNotifyMessage] = useState("");
   const [notifyError, setNotifyError] = useState("");
-  const [open, setOpen] = useState(false);
 
   const handleNotifySubmit = async (id: any) => {
     if (notifyMessage.trim().length >= 1) {
@@ -107,36 +101,25 @@ export const FacilityCard = (props: {
                           {facility.name}
                         </Link>
                         <TooltipProvider>
-                          <Tooltip
-                            delayDuration={0}
-                            open={open}
-                            onOpenChange={setOpen}
+                          <TooltipComponent
+                            content={t("live_patients_total_beds")}
                           >
-                            <TooltipTrigger
-                              asChild
-                              onClick={() => setOpen(!open)}
+                            <div
+                              className={`relative flex items-center gap-1 text-sm ${
+                                (facility.patient_count || 0) /
+                                  (facility.bed_count || 0) >
+                                0.85
+                                  ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white"
+                                  : "text-secondary-700"
+                              }`}
                             >
-                              <div
-                                data-test-id="occupancy-badge"
-                                className={`relative flex items-center gap-1 text-sm ${
-                                  (facility.patient_count || 0) /
-                                    (facility.bed_count || 0) >
-                                  0.85
-                                    ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white"
-                                    : "text-secondary-700"
-                                }`}
-                              >
-                                <CareIcon icon="l-bed" />
-                                <dt>
-                                  {t("occupancy")}: {facility.patient_count} /{" "}
-                                  {facility.bed_count}
-                                </dt>
-                              </div>
-                            </TooltipTrigger>
-                            <TooltipContent side="top" sideOffset={8}>
-                              {t("live_patients_total_beds")}
-                            </TooltipContent>
-                          </Tooltip>
+                              <CareIcon icon="l-bed" />
+                              <dt>
+                                {t("occupancy")}: {facility.patient_count} /{" "}
+                                {facility.bed_count}
+                              </dt>
+                            </div>
+                          </TooltipComponent>
                         </TooltipProvider>
                       </div>
                       <ButtonV2

src/components/ui/tooltip.tsx

@@ -9,20 +9,33 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+const TooltipContent = TooltipPrimitive.Content;
+
+const TooltipComponent = React.forwardRef<
+  React.ElementRef<typeof TooltipContent>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+>(({ children, content, sideOffset = 4, className }, ref) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={open} onOpenChange={setOpen} delayDuration={0}>
+        <TooltipTrigger asChild onClick={() => setOpen(!open)}>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
+            className,
+          )}
+        >
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
+
+export { TooltipComponent, TooltipTrigger, TooltipContent, TooltipProvider };