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,6 +22,15 @@ const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
 
   return (
     <NextLink href={ pathname } passHref>
+      <Tooltip
+        label={ text }
+        hasArrow={ false }
+        isDisabled={ !isCollapsed }
+        placement="right"
+        variant="nav"
+        gutter={ 0 }
+        color={ isActive ? colors.text.active : colors.text.hover }
+      >
         <Link
           as="li"
           listStyleType="none"
@@ -40,6 +49,7 @@ const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
             { !isCollapsed && <Text variant="inherit">{ text }</Text> }
           </HStack>
         </Link>
+      </Tooltip>
     </NextLink>
   );
 };