feat: sidebar nav item tooltips (#9160)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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 />)}

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>