tooltip when nav bar is collapsed

theme/components/Tooltip.ts

 import { Tooltip as TooltipComponent } from '@chakra-ui/react';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+
+const variantNav: SystemStyleFunction = (props) => {
+  return {
+    bg: mode('blue.50', 'gray.800')(props),
+    color: 'blue.400',
+    padding: '15px 12px',
+    minWidth: '120px',
+    borderRadius: 'base',
+    fontSize: '14px',
+    lineHeight: '20px',
+    textAlign: 'center',
+    boxShadow: 'none',
+    fontWeight: '500',
+  };
+};
+
+const variants = {
+  nav: variantNav,
+};
 
 const Tooltip: ComponentStyleConfig = {
+  variants,
   baseStyle: {
     maxWidth: 'unset',
   },

ui/navigation/NavLink.tsx

-import { Link, Icon, Text, HStack } from '@chakra-ui/react';
+import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -22,24 +22,34 @@ const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
 
   return (
     <NextLink href={ pathname } passHref>
-      <Link
-        as="li"
-        listStyleType="none"
-        w={ isCollapsed ? '60px' : '180px' }
-        px={ isCollapsed ? '15px' : 3 }
-        py={ 2.5 }
-        color={ isActive ? colors.text.active : colors.text.default }
-        bgColor={ isActive ? colors.bg.active : colors.bg.default }
-        _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="base"
-        whiteSpace="nowrap"
-        { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      <Tooltip
+        label={ text }
+        hasArrow={ false }
+        isDisabled={ !isCollapsed }
+        placement="right"
+        variant="nav"
+        gutter={ 0 }
+        color={ isActive ? colors.text.active : colors.text.hover }
       >
-        <HStack spacing={ 3 }>
-          <Icon as={ icon } boxSize="30px"/>
-          { !isCollapsed && <Text variant="inherit">{ text }</Text> }
-        </HStack>
-      </Link>
+        <Link
+          as="li"
+          listStyleType="none"
+          w={ isCollapsed ? '60px' : '180px' }
+          px={ isCollapsed ? '15px' : 3 }
+          py={ 2.5 }
+          color={ isActive ? colors.text.active : colors.text.default }
+          bgColor={ isActive ? colors.bg.active : colors.bg.default }
+          _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
+          borderRadius="base"
+          whiteSpace="nowrap"
+          { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+        >
+          <HStack spacing={ 3 }>
+            <Icon as={ icon } boxSize="30px"/>
+            { !isCollapsed && <Text variant="inherit">{ text }</Text> }
+          </HStack>
+        </Link>
+      </Tooltip>
     </NextLink>
   );
 };