From 60a3bc583269cb05771b07779498be210e84528b Mon Sep 17 00:00:00 2001
From: VasuDevrani <101383635+VasuDevrani@users.noreply.github.com>
Date: Tue, 30 May 2023 19:48:21 +0530
Subject: [PATCH] feat: sidebar nav item tooltips (#9160)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/features/shell/Shell.tsx          | 3 +++
 packages/ui/components/tooltip/Tooltip.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 9e85062717..89427593b3 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -41,6 +41,7 @@ import {
   HeadSeo,
   Logo,
   SkeletonText,
+  Tooltip,
   showToast,
   useCalcomTheme,
 } from "@calcom/ui";
@@ -618,6 +619,7 @@ const NavigationItem: React.FC<{
 
   return (
     <Fragment>
+      <Tooltip side="right" content={t(item.name)} className="lg:hidden">
       <Link
         href={item.href}
         aria-label={t(item.name)}
@@ -646,6 +648,7 @@ const NavigationItem: React.FC<{
           <SkeletonText className="h-3 w-32" />
         )}
       </Link>
+      </Tooltip>
       {item.child &&
         isCurrent({ router, isChild, item }) &&
         item.child.map((item, index) => <NavigationItem index={index} key={item.name} item={item} isChild />)}
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
index 8bb744eda2..79162aa3ad 100644
--- a/packages/ui/components/tooltip/Tooltip.tsx
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -30,14 +30,15 @@ export function Tooltip({
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal>
         <TooltipPrimitive.Content
+          {...props}
           className={classNames(
             side === "top" && "-mt-7",
             side === "right" && "ml-2",
-            "bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg"
+            "bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg",
+            props.className && `${props.className}`
           )}
           side={side}
-          align="center"
-          {...props}>
+          align="center">
           {content}
         </TooltipPrimitive.Content>
       </TooltipPrimitive.Portal>